为什么li点击变色,其他兄弟节点的样式效果无效呢?

qq_15591383 2019-06-14 10:36:50
我有这样一个需求,有多个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>
...全文
373 5 打赏 收藏 转发到动态 举报
写回复
用AI写文章
5 条回复
切换为时间正序
请发表友善的回复…
发表回复
lllomh 2019-06-17
  • 打赏
  • 举报
回复
你都没有移除 肯定之前的还在
qq_15591383 2019-06-17
  • 打赏
  • 举报
回复
好的,谢谢你,我试试去,因为我这样不符合html标准是为了实现一个特殊的隐藏效果才不得已,不然是不会这样操作的。
qq_15591383 2019-06-17
  • 打赏
  • 举报
回复
现在有2个小问题,
第一是 $(this).parent().addClass("ziyuankuai1selected").siblings().removeClass("ziyuankuai1selected");
这个方法确实有效,但是我点击以后,文字没有变成我想要的橙色,只有文字底部出现了那个橙色的粗线条,难道
.ziyuankuai1selected{
cursor:pointer;
color:orange;
border-bottom:2px solid orange;
}
这个样式的color:orange不起作用吗?

第二,我有2个父容器,分别放了多个<li></li>,这样,点击第一个父容器下的某个<li>以后,这个<li>的底部有橙色粗线条,再去点第二个父容器下的任意一个<li>,这时第一个父容器下刚才被点击的<li>还是保持被点击的样式,而我想要的是这2个容器中的任意<li>被点击以后,之前的被点击的<li>恢复最初默认的样式。
<div class="lishibanji">
<div class="ziyuankuai1">
<li>项目一</li>
</div>
<div class="ziyuankuai1">
<li>项目二</li>
</div>
<div class="ziyuankuai1">
<li>项目三</li>
</div>
....
</div>

<div class="huodongbanji">
<div class="ziyuankuai1">
<li>项目四</li>
</div>
<div class="ziyuankuai1">
<li>项目五</li>
</div>
<div class="ziyuankuai1">
<li>项目六</li>
</div>
</div>
天际的海浪 2019-06-14
  • 打赏
  • 举报
回复
另外ul与li层级之间不应该有别的元素,这不符合html标准,有的浏览器解析可能会出错,div应该放到li内。
天际的海浪 2019-06-14
  • 打赏
  • 举报
回复
$(this).parent().addClass("ziyuankuai1selected").siblings().removeClass("ziyuankuai1selected");

87,901

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧