在需要跳转页面下,怎样用js改变点击菜单的样式?
在需要跳转页面下,当点击首页时,首页加上样式CurrentLi,其他的链接不加,当点击联系时,联系加上样式CurrentLi,其他的链接不加。<ulid="sddm"><...
在需要跳转页面下,当点击首页时,首页加上样式CurrentLi,其他的链接不加,当点击联系时,联系加上样式CurrentLi,其他的链接不加。<ul id="sddm"><li class="CurrentLi"><a href="/">首页</a></li><li ><a href="/contact/">联系</a></li></al>
展开
3个回答
展开全部
你这段代码没有问题,原理是初始化页面后遍历导航的链接跟浏览器地址链接比较来添加样式,所以,如果你想打开新页面能相应添加class="on",需要每个页面都有这段代码
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
可能跟的效果不一样,重点在于理解,祝你成功
<style>
.CurrentLi{
background: red;
color: red;
}
</style>
<ul id="sddm">
<li class="">
<a class="cur" href="#">首页</a>
</li>
<li >
<a class="cur" href="#">联系</a>
</li>
</ul>
<script>
$(document).ready(function(){
$("#sddm li").click(function(){
$("#sddm li").removeClass("CurrentLi");
});
$("#sddm li:first-child").click(function(){
$("#sddm li").removeClass("CurrentLi");
$(this).addClass("CurrentLi");
});
});
</script>
<style>
.CurrentLi{
background: red;
color: red;
}
</style>
<ul id="sddm">
<li class="">
<a class="cur" href="#">首页</a>
</li>
<li >
<a class="cur" href="#">联系</a>
</li>
</ul>
<script>
$(document).ready(function(){
$("#sddm li").click(function(){
$("#sddm li").removeClass("CurrentLi");
});
$("#sddm li:first-child").click(function(){
$("#sddm li").removeClass("CurrentLi");
$(this).addClass("CurrentLi");
});
});
</script>
本回答被提问者和网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询