如何删除 class 具有数据属性作为触发器的兄弟元素

Question

我正在尝试使用数据属性作为触发器进行简单的制表。

当我单击 .tab-list 时，如果与数据标签相匹配，它应该为所有元素提供 class 活动。但是我在删除 .tab-panel 的同级时遇到问题，我试图找到（'data'）来删除 class，虽然它会工作

如何从 .tab-panel 中删除 class 并将数据属性作为触发器

$(document).ready(function() {
  tab();
});


function tab() {
  var tablist = $('.tab-heading .tab-list');

  tablist.on('click', function() {
    var tablistData = $(this).attr('data-tabbing');
    $(this).addClass('active').siblings().removeClass('active');

    var listContent = $('.tab-content .tab-panel');
    console.log(listContent.length);
    listContent.find("[data-tabbing='" + tablistData + "']").addClass('active');
    listContent.siblings().find('data').removeClass('active');

  });
}

.tab-wrapper {
  overflow: hidden;
}
.tab-wrapper .tab-heading {
  display: block;
  clear: both;
  overflow: hidden;
}
.tab-wrapper .tab-heading .tab-list {
  background-color: red;
  float: left;
  margin-right: 10px;
  cursor: pointer;
}
.tab-wrapper .tab-heading .tab-list.active {
  background-color: yellow;
}
.tab-wrapper .tab-content {
  display: block;
  clear: both;
  overflow: hidden;
}
.tab-wrapper .tab-content .tab-head-sp.active {
  color: green;
  border: 1px solid red;
}
.tab-wrapper .tab-content .list-content {
  width: 100%;
  display: none;
  background-color: green;
  color: #fff;
}
.tab-wrapper .tab-content .list-content.active {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tab-wrapper">
  <div class="tab-heading">
   <div class="tab-list" data-tabbing="item-1">item-1</div>
   <div class="tab-list" data-tabbing="item-2">item-2</div>
  </div>

  <div class="tab-content">
   <div class="tab-panel">
    <div class="tab-head-sp" data-tabbing="item-1">heading-1</div>
    <div class="list-content" data-tabbing="item-1">
     <p>content-1</p>
    </div>
   </div>
   <div class="tab-panel">
    <div class="tab-head-sp" data-tabbing="item-2">heading-2</div>
    <div class="list-content" data-tabbing="item-2">
     <p>content-2</p>
    </div>
   </div>
  </div>
 </div>

Answer 1

您可以在再次设置之前从 listContent 的子项中删除 active class。

listContent.children(".active").removeClass("active")
listContent.find("[data-tabbing='" + tablistData + "']").addClass('active');

另一种方法是在我们设置它之前再次删除 class，但是如果你想使用 .find()，请尝试 listContent.siblings().find("div[data!='"+tablistData+"']").removeClass('active')

$(document).ready(function() {
  tab();
});


function tab() {
  var tablist = $('.tab-heading .tab-list');

  tablist.on('click', function() {
    var tablistData = $(this).attr('data-tabbing');
    $(this).addClass('active').siblings().removeClass('active');

    var listContent = $('.tab-content .tab-panel');
    //listContent.children(".active").removeClass("active")
    listContent.siblings().find("div[data!='"+tablistData+"']").removeClass('active')
    listContent.find("[data-tabbing='" + tablistData + "']").addClass('active');


  });
}

.tab-wrapper {
  overflow: hidden;
}

.tab-wrapper .tab-heading {
  display: block;
  clear: both;
  overflow: hidden;
}

.tab-wrapper .tab-heading .tab-list {
  background-color: red;
  float: left;
  cursor: pointer;
}

.tab-wrapper .tab-heading .tab-list.active {
  background-color: yellow;
}

.tab-wrapper .tab-content {
  display: block;
  clear: both;
  overflow: hidden;
}

.tab-wrapper .tab-content .tab-head-sp.active {
  color: green;
  border: 1px solid red;
}

.tab-wrapper .tab-content .list-content {
  width: 100%;
  display: none;
  background-color: green;
  color: #fff;
}

.tab-wrapper .tab-content .list-content.active {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tab-wrapper">
  <div class="tab-heading">
    <div class="tab-list" data-tabbing="item-1">item-1</div>
    <div class="tab-list" data-tabbing="item-2">item-2</div>
  </div>

  <div class="tab-content">
    <div class="tab-panel">
      <div class="tab-head-sp" data-tabbing="item-1">heading-1</div>
      <div class="list-content" data-tabbing="item-1">
        <p>konten-1</p>
      </div>
    </div>
    <div class="tab-panel">
      <div class="tab-head-sp" data-tabbing="item-2">heading-2</div>
      <div class="list-content" data-tabbing="item-2">
        <p>konten-1</p>
      </div>
    </div>
  </div>
</div>

如何删除 class 具有数据属性作为触发器的兄弟元素

How to remove class sibling element with data-attribute as trigger

jquery

siblings