为什么li点击变色,其他兄弟节点的样式效果无效呢?
我有这样一个需求,有多个li列表,鼠标放到其中一个li上的时候文字变色,底部有一个粗线条,点击后,文字也变色,底部也有粗线条,当鼠标放到其他li上的时候,这个li项中的文字变色,底部有一个粗线条,点击这个li中的文字的时候,之前被点击的li项恢复最初的样式,现在被点击的li中的文字变色,底部出现粗线条,但是点击其他li中文字的时候,原来被点击的li的样式没有恢复最初的效果。
我的样式定义如下:
.ziyuankuai1{
width:100px;
height:30px;
line-height:25px;
margin:13px;
float:left;
font-size:14px;
font-weight:bold;
color:#000;
text-align: left;
cursor:pointer;
overflow: hidden;
}
.ziyuankuai1 li{
margin-left: -15px;
}
.ziyuankuai1:hover {
width:100px;
height:30px;
line-height:25px;
color: #000;
margin:13px;
float:left;
font-size:14px;
font-weight:bold;
cursor:pointer;
text-align: left;
overflow: hidden;
cursor:pointer;
color:orange;
border-bottom:2px solid orange;
}
.ziyuankuai1selected{
cursor:pointer;
color:orange;
border-bottom:2px solid orange;
}
页面代码如下:
<ul class="w3-ul w3-center">
<div class="ziyuankuai1">
<li>项目一</li>
</div>
<div class="ziyuankuai1">
<li>项目二</li>
</div>
<div class="ziyuankuai1">
<li>项目三</li>
</div>
<div class="ziyuankuai1">
<li>项目四</li>
</div>
</ul>
js代码如下:
<script type='text/javascript' language='javascript'>
$(document).ready(function(){
$(".w3-ul li").click(function(){
$(this).parent().addClass("ziyuankuai1selected").siblings().addClass("ziyuankuai1");
});
});
</script>