如何在 laravel blade 循环中动态添加 'active' class？ (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->first 助手。如果它是数组中的第一项，则 returns 为真。所以你可以这样做：

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

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

Answer 2

您也可以使用 javascript 来做到这一点！

为您的 li 标签设置一个 ID。
通过 id 获取您的 li 标签元素。
.addClass('active');

Answer 3

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

https://github.com/dwightwatson/active

Answer 4

只需在你的 li 中使用 $loop->first active class。 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

如何在 laravel blade 循环中动态添加 'active' class？ (Laravel 5.3)

How do I add 'active' class dynamically in loop on the laravel blade? (Laravel 5.3)

php

laravel

blade

laravel-5.3