laravel 循环将活动类添加到循环的第一项

Question

I'm trying to display dynamic data in bootstrap tabs. For that I want to add active class to the first item. How can I do that?? My blade code

 <div id="rootwizard">
                                    <ul class="nav nav-tabs wizard" role="tablist">
                                    @foreach( $places as $place)
                                            <li class=" active" style=""><a href="#{{$place->id}}" role="tab" data-toggle="tab">{{$place->name}}</a></li>
                                    @endforeach
                                         
                                    </ul>


                                    <div class="tab-content">
                                            @foreach($places as $place)
                                            <div class="tab-pane fade active in" id="{{$place->id}}">
                                                    <div class="row">
                                                        <div class="col col-md-4">
                                                            <img class="img-responsive" src=" 
                                 {{'/storage/places/'.$place->image}}" alt="">
                                                        </div>
                                                        <div class="col col-md-4">
                                                  
                                                                {{$place->intro}}
                                                          
                                              <a href="#" class="btn btn-info">Read More</a>
                                                        </div>
                                                        <div class="col col-md-4">
         <img class="img-responsive" src="{{'front/images/maps/map-sample.PNG'}}" alt="map">
                                                        </div>                  
                                                    </div>
                                            </div>
                                            @endforeach

And my controller

 $place = Place::orderby('id', 'asc')->get();

Answer 1

Modify your @foreach() loop to include an index, then add the active class based on that:

@foreach($places as $index => $place)
  <li class="{{ $index == 0 ? 'active' : '' }}" style="">
    <a href="#{{ $place->id }}" role="tab" data-toggle="tab">{{ $place->name }}</a>
  </li>
  ...
@endforeach

...

@foreach($places as $index => $place)
  <div class="tab-pane fade {{ $index == 0 ? 'active in' : '' }}" id="{{ $place->id }}">
  ...
@endforeach

As per @ThomasVanderVeen's suggestion, you can use the built-in $loop variable to accomplish this without the need for the extra $index variable:

@foreach($places as $place)
  <li class="{{ $loop->first ? 'active' : '' }}" style="">
    <a href="#{{ $place->id }}" role="tab" data-toggle="tab">{{ $place->name }}</a>
  </li>
  ...
@endforeach

...

@foreach($places as $place)
  <div class="tab-pane fade {{ $loop->first ? 'active in' : '' }}" id="{{ $place->id }}">
  ...
@endforeach

Documentation for the $loop variable can be found here:

https://laravel.com/docs/8.x/blade#the-loop-variable

Answer 2

Start the @foreach loop after <ul tag will solve your problem. Otherwise, it will active all the <a elements.

            <div class="col-lg-3">

                <ul class="nav nav-tabs flex-column">
                    @foreach($facilities as $index => $team)
                    <li class="nav-item {{ ($index == 0) ? 'active show':'' }}">
                        <a class="nav-link" data-toggle="tab" href="#tab-{{ $team->id }}">{{$team->title}}</a>
                    </li>
                    @endforeach
                </ul>

            </div>
            <div class="col-lg-9 mt-4 mt-lg-0">
                <div class="tab-content">
                    @foreach($facilities as $index => $team)
                    <div class="tab-pane {{ ($index == 0) ? 'active show':'' }}" id="tab-{{ $team->id }}">
                        <div class="row">
                            <div class="col-lg-8 details order-2 order-lg-1">
                                <h3>{{$team->title}}</h3>

                                <p>{{$team->message}}</p>
                            </div>
                            <div class="col-lg-4 text-center order-1 order-lg-2">
                                <img src="{{asset('storage/service/'.$team->image)}}" alt="" class="img-fluid">
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>

            </div>

    </div>