搜索
您的当前位置:首页正文

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

来源:知库网

当鼠标选中页面导航栏的某一栏目后,如何给选中栏目添加特殊样式,一直没怎么搞清楚,今天学习了一下,并做个总结。

这边有两种情况,一种是直接给当前页面添加特殊样式,当网页刷新或者跳转到下一页后,样式消失;另一种情况是即使刷新页面后样式仍然有效。

直接上代码:

第一种情况:

<script>  
$(document).ready(function(){      
    $(".nav a").each(function(){         
        $(this).click(function({            
            $(".nav .hover").removeClass("hover");        
            $(this).addClass("hover");       
            return false;//防止页面跳转     
       });     
   });
});  
</script>
<div class="nav">  
<ul>  
    <li><a href="1.html" class="hover"> 首页</a></li>  
    <li><a href="2.html"> 个人资料</a></li>  
    <li><a href="3.html"> 我的好友</a></li>  
    <li><a href="4.html"> 消息管理</a></li>   
</ul>     
</div>

第二种情况:

<script ">  
$(document).ready(function(){      
     $(".nav a").each(function(){          
          $this = $(this);          
          if($this[0].href==String(window.location)){            
              $this.addClass("hover");         
          }   
     }); 
}); 
 </script>
Top