Laravel 9中如何为foreach循环元素动态设置active类

你的问题出在Route::is('shop.category', $c->slug)的用法错误，Route::is的第二个参数并非用于匹配路由参数，导致所有分类项都被判定为匹配，从而全部加上active类。

后端渲染修正方案（推荐） #

利用Laravel的路由参数判断逻辑，只有当前路由的slug与循环项的slug一致时，才为该元素添加active类：

<div class="border-0 border-r border-slate-800 pr-2">
    <h3 class="font-semibold">Kategori</h3>
    <div class="mt-6 space-y-6 text-slate-500">
        <a href="{{ route('shop') }}" class="{{ Route::is('shop') ? 'active' : '' }} kategori-link">
            All Product
        </a>

        @foreach ($ctg as $c)
            <a href="{{ route('shop.category', $c->slug) }}"
               class="{{ (Route::is('shop.category') && request()->route('slug') === $c->slug) ? 'active' : '' }} kategori-link">
                {{ $c->name }}
            </a>
        @endforeach

    </div>
</div>

逻辑说明 #

• Route::is('shop.category')：确认当前访问的路由是分类页面
• request()->route('slug')：获取当前路由中的slug参数值
• 两者结合判断后，仅参数匹配的分类项会添加active类，实现导航菜单的精准高亮效果。

前端JS切换方案（适用于无刷新场景） #

如果需要点击时不刷新页面就切换active类，可添加以下JS代码：

const categoryLinks = document.querySelectorAll('.kategori-link');

categoryLinks.forEach(link => {
    link.addEventListener('click', function(e) {
        // 阻止默认跳转（若需保留页面跳转，可删除此句，同时保留后端判断确保刷新后高亮正确）
        e.preventDefault();
        
        // 移除所有链接的active类
        categoryLinks.forEach(item => item.classList.remove('active'));
        
        // 给当前点击的链接添加active类
        this.classList.add('active');
        
        // 若需跳转页面，取消上方e.preventDefault()后，可添加此句
        // window.location.href = this.href;
    });
});

内容的提问来源于stack exchange，提问作者Wildan Maulana