jQuery中给导航栏添加选中样式的代码是什么
导读：这篇文章主要为大家详细介绍了jQuery中给导航栏添加选中样式的代码是什么，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望对大家学习或工作能有帮助。 解决方法有两种：一种...
这篇文章主要为大家详细介绍了jQuery中给导航栏添加选中样式的代码是什么，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望对大家学习或工作能有帮助。
解决方法有两种：一种是直接给当前页面添加特殊样式，当网页刷新或者跳转到下一页后，样式消失；另一种情况是即使刷新页面后样式仍然有效。
直接上代码：
第一种情况：
script type="text/javascript" src="templets/js/jquery.js">
/script>
script type="text/javascript">
$(document).ready(function(){
$(".nav a").each(function(){
$(this).click(function(){
$(".nav .hover").removeClass("hover");
$(this).addClass("hover");
return false;
//防止页面跳转
}
);
}
);
}
);
/script>
div class="nav">
ul>
li>
a href="1.html" class="hover">
首页/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" src="templets/js/jquery.js">
/script>
script type="text/javascript">
$(document).ready(function(){
$(".nav a").each(function(){
$this = $(this);
if($this[0].href==String(window.location)){
$this.addClass("hover");
}
}
);
}
);
/script>
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>
以上就是关于“jQuery中给导航栏添加选中样式的代码是什么”的相关知识，感谢各位的阅读，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注网络，小编每天都会为大家更新不同的知识。
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： jQuery中给导航栏添加选中样式的代码是什么
本文地址： https://pptw.com/jishu/653719.html