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

【问题标题】：laravel loop add active class to first item of looplaravel 循环将活动类添加到循环的第一项
【发布时间】：2021-01-29 04:03:33
【问题描述】：

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

 <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();

【问题讨论】：

标签： php laravel bootstrap-4 laravel-7

【解决方案1】：

修改您的 @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

【讨论】：

刀片循环中有一个 $loop 变量。您也可以使用$loop->first ? 'active' : ''。 Docs.
@ThomasVanderVeen 是的，我总是忘记这一点 :) 如果您想将其添加为您自己的答案，那将是有益的
你已经回答了这个问题，我的评论只是一个小补充。你可以用这个作为额外的解决方案来更新你的。

【解决方案2】：

            <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>

【讨论】：