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

Question

My view is like this :

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

I want add class="active" in li tag. So, when the tab clicked, the li tag will active. And I want first loop will active too

How can I do it?

Answer 1

If you will follow instructions about The Loop Variable you will find usefull $loop->first helper. It returns true if it's first item in an array. So you can do this:

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

Then on tab class click if you want to move class to active tab you should make it by using javascript

Answer 2

You could use javascript to do this also!

1. Set an ID to your li tag.
2. Get your li tag element by the id.
3. .addClass('active');

Answer 3

I have used a laravel package in the past if you need a quick fix

https://github.com/dwightwatson/active

Answer 4

Just Use $loop->first active in your li class. class="{{ $loop->first ? 'active' : '' }}"

Sample example:-

@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