jq 实现点击时添加样式并移除兄弟样式

2022年6月22日 369次阅读 来源: yoonhi_

如图：

当我点击其他选项时，被点击的选项会有背景色，而之前的选项清空背景色

默认第一个拥有背景色

《jq 实现点击时添加样式并移除兄弟样式》

当我点击第四个选项时的效果

《jq 实现点击时添加样式并移除兄弟样式》 

 如果这些选项时同级的，比如：

<style>
    .selected { backgroud: #red; }
</style>

<ul>
    <li class="code selected">xxx</li>
    <li class="code">xxx</li>
    <li class="code">xxx</li>
</ul>

对应的 jq 代码为：

$('.code').on('click', function() {
    $(this).addClass("selected").siblings().removeClass("selected");
})

当然会有稍微复杂一点的情况，就是他们不是同级，但是仍有一定规律的情况下，比如：

<div class="test1">
    <div class="test2 sel">内容</div>
</div>
<div class="test1">
    <div class="test2">内容</div>
</div>
<div class="test1">
    <div class="test2">内容</div>
</div>

他们之间多了一个父标签

对应的 jq 代码为：

$('.test2').on('click', function() {
    $(this).addClass("sel").parent().siblings().find('.test2').removeClass("sel");
})

// 点击 当前选项 test2
// 执行 给当前点击的选项添加类 sel ,同时找到当前选项的父标签（也就是 test1）,然后对当前 test1 的所有兄弟标签执行查找 test1 下的 test2 ,并 移除 test2 的 sel

《jq 实现点击时添加样式并移除兄弟样式》

    原文作者：yoonhi_
    原文地址: https://blog.csdn.net/dreamer0823/article/details/105864912
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞