如何在laravel刀片上动态添加“活动”类？ （Laravel 5.3）

Question

我的观点是这样的：

<ul class="nav nav-tabs nav-cat">
    @foreach($countries as $country)
        <li role="presentation"><a href="javascript:;" data-toggle="tab" @click="$refs.player.getPlayer({{ $country->id }})">{{ ucfirst($country->name) }}</a></li>
    @endforeach
</ul>

我想在li标签中添加class="active"。因此，当单击选项卡时，li标签将处于活动状态。我希望第一个循环也会活跃

我该怎么做？

Answer 1

如果您按照The Loop Variable的说明操作，您会发现有用的 $ loop-＆gt;第一个帮助器。如果它是数组中的第一个项，则返回true。所以你可以这样做：

@foreach($items as $item)
    <li class="{{ $loop->first ? 'active' : '' }}">...</li>
@endforeach

然后在选项卡类上单击，如果要将类移动到活动选项卡，则应使用javascript

Answer 2

您也可以使用javascript来执行此操作！

1. 为您的li标签设置ID。
2. 通过ID获取您的li标签元素。
3. .addClass('active');

Answer 3

如果您需要快速修复，我过去使用了laravel包

https://github.com/dwightwatson/active

Answer 4

只需在您的li类中使用$ loop-> first active即可。 class="{{ $loop->first ? 'active' : '' }}"

示例：-

@foreach ($category as $v_cat)
<li class="{{ $loop->first ? 'active' : '' }}"><a href="#{{$v_cat->category_name}}" data-toggle="tab">{{$v_cat->category_name}}</a></li>
@endforeach