利用Jquery给当前页或者跳转后页面的导航栏添加选中后样式

原创于 2015-09-15 10:10:39 发布 · 798 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#js

JS滚动效果专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种使用jQuery实现的网页导航栏高亮显示当前页面及点击切换效果的方法。通过对导航链接进行循环判断，当链接地址与当前页面URL相匹配时，为其父元素添加激活样式；同时为导航链接绑定点击事件，移除所有悬浮效果并为被点击项添加特定样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

$(".nav ul li a").each(function(){
    $this = $(this);
    $str = window.location.href.indexOf($this[0].href);
    if($str >= 0){
        $this.parent().addClass("active");
    }
});

$(".nav ul > li > a").each(function(){  
        $(this).click(function(){  
            $(".nav .hover").removeClass("hover");  
            $(this).addClass("hover");    
            return false;
        });  
});