Laravel foreach导航：获取URL路径添加类，alert类无法添加到a标签？

嘿，我一眼就看出问题所在啦！你当前的代码是把alert alert-success类加到了<li>标签上（因为用了.parent()），但你想要的是把这个类加到<a>标签上，这就是为什么看不到预期效果的原因～

修正后的基础代码 #

直接调整jQuery的选择逻辑，去掉.parent()，直接给匹配到的<a>标签添加类：

<ul class="nav nav-pills" id="nav">
@foreach($menu as $d)
<li role="presentation"><a class="text-capitalize " href="{!! $d->name !!}">{!! $d->name !!}</a></li>
@endforeach
</ul>
<script type="text/javascript">
$(document).ready(function() {
    // 获取当前URL路径
    var pathname = window.location.pathname;
    // 直接给匹配的<a>标签添加类
    $('.nav > li > a[href="'+pathname+'"]').addClass('alert alert-success');
})
</script>

额外注意：路径匹配一致性问题 #

有时候$d->name生成的href可能和window.location.pathname格式不统一（比如href是home，但pathname是/home），这会导致匹配失败。可以用以下代码统一格式，避免这个问题：

$(document).ready(function() {
    // 移除路径末尾的斜杠，统一格式
    var pathname = window.location.pathname.replace(/\/$/, '');
    
    $('.nav > li > a').each(function() {
        var linkHref = $(this).attr('href').replace(/\/$/, '');
        // 匹配处理后的路径
        if (pathname === linkHref) {
            $(this).addClass('alert alert-success');
            // 如果需要给<li>加active类，也可以在这里添加
            $(this).parent().addClass('active');
        }
    });
})

这样调整后，就能精准地把alert alert-success类加到当前URL对应的<a>标签上啦，和你预期的效果一致～

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