首页 > 解决方案 > laravel 循环将活动类添加到循环的第一项

问题描述

我正在尝试在引导选项卡中显示动态数据。为此,我想将活动类添加到第一项。我怎样才能做到这一点??我的刀片代码

 <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

还有我的控制器

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

标签: phplaravelbootstrap-4laravel-7

解决方案


修改@foreach()循环以包含索引,然后active基于该索引添加类:

@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

根据@ThomasVanderVeen 的建议,您可以使用内置$loop变量来完成此操作,而无需额外的$index变量:

@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

$loop可以在此处找到变量的文档:

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


推荐阅读