李涛自留地
回到顶部
首页 > 前端 > jQuery实现网站导航跟随链接选中样式

jQuery实现网站导航跟随链接选中样式

在做网站过程中网站导航是比较重要的一个部分，一个好的导航可以给用户营造一个好的体验氛围，而导航点击后跟随选中样式就是一种很好的用户体验，让用户知道目前所处在网站的什么位置。在百度里查找了很久用jQuery实现网站导航跟随链接选中样式的js，找了很久才找到一个可以直接使用的Dome,大部分存在的问题就是不能完全跟随点击的链接选中状态。以下是分享的可以直接拿来就可以用的Dome，代码如下： 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Jquery跳转后页面的导航栏添加选中后样式的实例</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, 
user-scalable=no"/>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<style>
*{margin: 0;padding: 0;}
a{
    text-decoration: none;
}
.nav{
    width: 100%;
    height: 50px;
    background: gray;
} 
.nav ul li{
    float: left;
    padding:0 5px;
    list-style: none;
}
.nav ul li a{
    width: 100px;
    line-height: 50px;
    text-align:center;
    display: block;
    color:black;
}
.nav .on{
    color: #fff;
    background: red;
}
</style>
</head>
<body>
    <div class="nav"> 
        <ul> 
          <li><a href="1.html"> 首页</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 type="text/javascript"> 
$(document).ready(function(){ 
  $(".nav li a").each(function(){ 
    if($(this)[0].href==String(window.location)){ 
      $(this).addClass("on").siblings().removeClass("on"); 
      //$(this).parent('li').addClass("on").siblings().removeClass("on"); 直接父级
    } 
  }); 
}); 
</script> 
</body>
</html>

以上来源于：https://blog.csdn.net/a772116804/article/details/80356046

总体来说还是不错的Dome,但是存在一个问题首页的链接通常应该是选中状态，可以给首页的li标签添加一个和on类似的样式，这样一个jQuery实现网站导航跟随链接选中样式就完美了。

若非作者标注皆为李涛自留地原创文章，转载或复制请以超链接形式并注明出处。