Как я могу сделать эту вкладку активной по умолчанию?

Question

У меня есть несколько вкладок, и я хочу сделать активную первую вкладку по умолчанию. Теперь не активен, только если я нажимаю вкладку работает. Я хочу сделать первую вкладку активной по умолчанию.

вот мой код:

<ul class="nav nav-tabs">
    <?php $count_contact = 0; ?>
    @foreach($user->contact as $contact)    
        <li class=<?php if($count_user == 0){ echo "active"; } ?> >
            <a data-toggle="tab" href="#contact<?php echo $count_contact++; ?>">
                <?php $img = asset('thumbnail').'/'.$contact->profile_picture; ?>
                @if(@getimagesize($img))
                    <img class="img-circle noticeboard-profile-picture" src="{{ url('ass/50/50?'.$img) }}" alt=""></a>
                @else
                    <?php $img = "assets/img/user.jpg"; ?>
                    <img class="hover-effect" alt="" src="{{ url('ass/54/54?'.$img) }}" width="50px">
                @endif
            </a>
        </li>
    @endforeach
</ul>

первая вкладка имеет идентификатор contact0.

Answer 1

Возможно, вы хотите использовать $count_contact вместо $count_user.Попробуйте изменить:

<li class=<?php if($count_user == 0){ echo "active"; } ?> >

На:

<li class=<?php if($count_contact == 0){ echo "active"; } ?> >

Answer 2

Blade предоставляет переменную $loop, к которой вы можете обращаться в цикле.Поэтому измените свой код на это:

<ul class="nav nav-tabs">
    <?php $count_contact = 0; ?>
    @foreach($user->contact as $contact)    
        <li @if($loop->first) class="active" @endif>
            <a data-toggle="tab" href="#contact<?php echo $count_contact++; ?>">
        <?php $img = asset('thumbnail').'/'.$contact->profile_picture; ?>
        @if(@getimagesize($img))
            <img class="img-circle noticeboard-profile-picture" src="{{ url('ass/50/50?'.$img) }}" alt=""></a>
        @else
        <?php $img = "assets/img/user.jpg"; ?>
            <img class="hover-effect" alt="" src="{{ url('ass/54/54?'.$img) }}" width="50px">
           @endif
           </a>
       </li>
    @endforeach

</ul>