页面跳转选中对应的导航

前端在做一个网站的时候，通常会有不同的导航，点击跳转到对应的页面上，这时候就需要给对应页面的导航加一个选中状态，如图：

这是一个有首页，seo优化，娱乐，三个页面组成的一个导航。

实现方式，利用location.href获取当前路径，对它和当前的<a href="a.html"</a> href的值进行对比，把当前的页面的导航选中。

 

<body>
        <ul class="menu" id="menu">  
        <li><a href="a.html">首页</a></li>  
        <li><a href="b.html">SEO优化</a></li>  
        <li><a href="c.html">生活娱乐</a></li>  
        </ul>  
        <p>aaaaaaa</p> 
    </body> 
        <script>
            var urlstr = location.href; 
            var urlstatus = false;
            $("#menu a").each(function() {
              if((urlstr + '/').indexOf($(this).attr('href')) > -1 && $(this).attr('href')!="") {  
                    $(this).addClass('cur'); 
                    urlstatus = true;
                }
                else {
                    $(this).removeClass('cur');
                }
            });
            if (!urlstatus) {
                $("#menu a").eq(0).addClass('cur');
            }
    </script>

 

posted @ 2017-12-08 14:56  蓝眼睛~~  阅读(1740)  评论(0)  编辑  收藏  举报