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

最新推荐文章于 2021-08-05 16:45:42 发布

原创最新推荐文章于 2021-08-05 16:45:42 发布 · 814 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#js

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

3 篇文章

订阅专栏

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

$(".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;
 
 
          });  
 
 
  });