如何使用data-attribute作为触发器删除class sibling元素

Question

我正在尝试使用data-attribute作为触发器进行简单的Tab键。

当我点击.tab-list时，如果与数据标签匹配，则应该为所有元素赋予活动类。但是我在删除.tab-panel的兄弟时遇到问题，我试图找到（'数据'）删除类，我虽然它会起作用

如何使用data-attribut作为触发器从.tab-panel中删除类

$(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

您可以在重新设置之前从active的子项中删除listContent课程。

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

另一种方法是在我们设置之前删除该类，但如果您想使用.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>