请教高手一个CSS+JQ的效果，问题描述：在导航中点击a变色,点击另一个a时之前的还原成默认色
本人刚接触jq，现在碰到一些问题求助大家。我的需求是：当鼠标经过和点击ul中的第一个a时变为hover的样式，再点另外一个a时变化样式，之前的a还原成默认色。自己写了段代...
本人刚接触jq，现在碰到一些问题求助大家。我的需求是：当鼠标经过和点击ul中的第一个a时变为hover的样式，再点另外一个a时变化样式，之前的a还原成默认色。自己写了段代码，麻烦大牛看看问题出在哪，如何修改，谢谢！
<script src="http://code.jquery.com/jquery-latest.js"></script> //头部引入jquery
<script type="text/javascript">
$(function(){
$("ul li a").click(function(){
$(this).addClass("cur").siblings().removeClass("cur");
})
})
</script>
-----------------------------------------------------------------------------------------------------------------------
<style>
.nav{ list-style:none; float:left; text-align:right; margin-top: 18px; line-height: 42px; margin-left: -2px;}
ul li{ width:88px;}
ul li a{ font-family:"微软雅黑","宋体"; font-size:14px; font-style:normal; font-weight:bold; letter-spacing:4px; color:#666666; text-decoration:none; }
ul li a:hover{ color:#666666;border-right:2px solid #F00;}
.cur{color:#ff0000; border-right:2px solid #F00;}
</style>
-----------------------------------------------------------------------------------------------------------------------
<body>
<ul class="nav">
<li><a href="page2.html" >作品集</a></li>
<li><a href="page2.html">3D插画</a></li>
<li><a href="page2.html">动画</a></li>
<li><a href="page2.html">互动媒体</a></li>
<li><a href="page2.html">建筑摄影</a></li>
</ul>
</body> 展开
<script src="http://code.jquery.com/jquery-latest.js"></script> //头部引入jquery
<script type="text/javascript">
$(function(){
$("ul li a").click(function(){
$(this).addClass("cur").siblings().removeClass("cur");
})
})
</script>
-----------------------------------------------------------------------------------------------------------------------
<style>
.nav{ list-style:none; float:left; text-align:right; margin-top: 18px; line-height: 42px; margin-left: -2px;}
ul li{ width:88px;}
ul li a{ font-family:"微软雅黑","宋体"; font-size:14px; font-style:normal; font-weight:bold; letter-spacing:4px; color:#666666; text-decoration:none; }
ul li a:hover{ color:#666666;border-right:2px solid #F00;}
.cur{color:#ff0000; border-right:2px solid #F00;}
</style>
-----------------------------------------------------------------------------------------------------------------------
<body>
<ul class="nav">
<li><a href="page2.html" >作品集</a></li>
<li><a href="page2.html">3D插画</a></li>
<li><a href="page2.html">动画</a></li>
<li><a href="page2.html">互动媒体</a></li>
<li><a href="page2.html">建筑摄影</a></li>
</ul>
</body> 展开
1个回答
展开全部
<script type="text/javascript">
$(function(){
$("ul li a").click(function(){
$(this).addClass("cur").parent().siblings().children("a").removeClass("cur");
})
})
</script>
你的写法是移除a的同辈元素
每个li下只有一个a
这里的a是没有同辈元素的
你要移除的应该是a的父级元素li的同辈元素的子元素a
$(function(){
$("ul li a").click(function(){
$(this).addClass("cur").parent().siblings().children("a").removeClass("cur");
})
})
</script>
你的写法是移除a的同辈元素
每个li下只有一个a
这里的a是没有同辈元素的
你要移除的应该是a的父级元素li的同辈元素的子元素a
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
