页面跳转选中对应的导航

66 阅读 0 评论 44 点赞

我是靠谱客的博主大方凉面，最近开发中收集的这篇文章主要介绍页面跳转选中对应的导航，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

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

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