导航跳转后保持选中状态 jquery高亮当前选中菜单

功能需求：
今天在写一个站点需要用到在导航菜单点击链接跳转到新页面后，高亮当前菜单样式。
简单的说，就是我点击导航菜单中的一个栏目，跳转到该栏目下，该栏目菜单也同时高亮（可以是背景色也可以是背景图片）

解决方法：
通过查看实例，我们需要用到JS中的jquery来实现这种效果，也可以通过CSS设置不同页面的a:hover实现效果，不过这显然是比较笨拙的方法。
那么，如何用JS来实现效果呢,实现它所用的原理就是通过js中的location.href得到当前页面的地址，然后在与导航上的链接地址匹对，相同的就用一个css样式标记。此方法支持动态链接和静态链接多种形式。
效果图：

代码如下：

<script type="text/javascript" src="jquery.min.js"></script>
<style>
.menu { padding:0; margin:0; list-style-type:none;}
.menu li { background:#FFD1A4; margin-right:1px; float:left; color:#fff; }
.menu li a { display:block; width:80px; text-align:center; height:32px; line-height:32px; color:#fff; font-size:13px; text-decoration:none;}

.cur{ background:#D96C00; font-weight:bold;}
</style>

<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>

<script type="text/javascript">
var urlstr = location.href;
//alert((urlstr + "/").indexOf($(this).attr("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>

最后

以上就是秀丽斑马为你收集整理的导航跳转后保持选中状态 jquery高亮当前选中菜单的全部内容，希望文章能够帮你解决导航跳转后保持选中状态 jquery高亮当前选中菜单所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。