为什么类激活不在第二个循环上工作？

My code is like this :

<div class="row no-gutter">
    <div class="col-md-3">
        <h2 class="nav-cat-text">By Players</h2>
    </div>
    <div class="col-md-9 col-xs-12">
        <div class="wrap-tabs">
            <ul class="nav nav-tabs nav-cat">
                @foreach($categories as $category)
                    @if($category->parent_id == 1)
                    <li role="presentation" class="{{ $loop->first ? 'active' : '' }}"><a href="javascript:;" data-toggle="tab">{{ ucfirst($category->name) }}</a></li>
                    @endif
                @endforeach
            </ul>
        </div>
    </div>
</div>

<br>
<!-- By Types -->
<div class="row no-gutter">
    <div class="col-md-3">
        <h2 class="nav-cat-text">By Types</h2>
    </div>
    <div class="col-md-9 col-xs-12">
        <div class="wrap-tabs">
            <ul class="nav nav-tabs nav-cat">
                @foreach($categories as $category)
                    @if($category->parent_id == 2)
                    <li role="presentation" class="{{ $loop->first ? 'active' : '' }}"><a href="javascript:;" data-toggle="tab">{{ ucfirst($category->name) }}</a></li>
                    @endif
                @endforeach
            </ul>
        </div>
    </div>
</div>

By players and by types, each has five tabs

When the code is executed, the first tab on by players is active

But why the first tab on by types is not active?

Its look like you make mistake in if condition look in first loop you use this condition

 @if($category->parent_id == 1)

and in second one you use this

 @if($category->parent_id == 2)

so in By Types first is not active

The main problem here that your first item has parent_id = 1 and so it's the first loop so it's active. but in the second foreach the first item hasn't parent_id = 2 because it of course has parent_id = 1 as mentioned before.

Solution:

before every @foreach. <?php $x= 0;?> and edit code to be like that:

@if($category->parent_id == 1)
    <li role="presentation" class="{{ $x == 0 ? 'active' : '' }}">
      <a href="javascript:;" data-toggle="tab">
           {{ ucfirst($category->name) }}
      </a>
    </li>
    <?php $x =1 ?>;
@endif

and the same for second loop

I would suggest you to use collections from laravel.

First you can separate your categories using filter function like the following.

<?php

$players = collect($categories)->filter(function($value){
    return $value->parent_id === 1;
});

$types = collect($categories)->filter(function($value){
    return $value->parent_id === 2;
});
?>

Now, that you have separate categories, loop them.

@foreach($players as $category)
    <li role="presentation" class="{{ $loop->first ? 'active' : '' }}">
        <a href="javascript:;" data-toggle="tab">{{ ucfirst($category->name) }}</a>
    </li>
@endforeach

@foreach($types as $category)
    <li role="presentation" class="{{ $loop->first ? 'active' : '' }}">
        <a href="javascript:;" data-toggle="tab">{{ ucfirst($category->name) }}</a>
    </li>
@endforeach