页面跳转选中对应的导航

最新推荐文章于 2020-08-20 15:02:13 发布

weixin_34252090

最新推荐文章于 2020-08-20 15:02:13 发布

阅读量482

点赞数

文章标签：前端 javascript ViewUI

原文链接：http://www.cnblogs.com/hfxm/p/8005369.html

版权

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

这是一个有首页，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>

转载于:https://www.cnblogs.com/hfxm/p/8005369.html

weixin_34252090

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
页面跳转选中对应的导航

前端在做一个网站的时候，通常会有不同的导航，点击跳转到对应的页面上，这时候就需要给对应页面的导航加一个选中状态，如图：这是一个有首页，seo优化，娱乐，三个页面组成的一个导航。实现方式，利用location.href获取当前路径，对它和当前的<a href="a.html"</a> href的值进行对比，把当前的页面的导航选中。<body> ...
复制链接

扫一扫