.not（）函数jquery隐藏其他元素

时间：2017-05-17 23:34:52

标签： javascript jquery html css

我在同一页面中有两个由不同内容组成的列表。因此制表活动状态隐藏了其他选项卡，这没关系，但它也隐藏了第二个制表文本。它应显示活动状态的文本或文本内容应显示两者。 这是我的代码

$(function() {
  var tabsArray = [];
  $(".tabdiv").each(function(index) {
    var elementID = $(this).attr("id"); //get UID of each tabdiv
    tabsArray.push("#" + elementID);
  });

  /*var first = document.querySelector('.tabdiv');*/
  //show only the first tabdiv in the tabulation
  $(tabsArray).each(function(index, element) {
    if (index === 0) {
      //get first elem of the array tabsArray
      $(element).show();
    } else {
      $(element).hide();
    }
  });
  $(".tablink").click(function() {
    var tab = '#' + $(this).data("tab");
    $(".tabdiv").not(tab).hide();
    $(tab).show();
  });
  //adds a class of active when the tab is clicked
  $('.mergers ').click(function() {
    if ($(this).hasClass("mergers")) {
      $('.mergers').removeClass('activeCol activeTxt');
      $(this).addClass("activeCol activeTxt");
      $(this).css('background-color', 'rgba(0,0,0,0) !important');
    }
  });

  


}); //end ready
.showFirst {
  display: block;
}

.activeCol {
  background-color: #ff8a8a;
}

.main-tab-flex {
  height: auto!important;
}

.mergers h3 {
  display: flex;
}

a.tablink {
  width: 100%;
}

.tabdiv h4,
.content {
  text-align: left;
}

.content {
  /*padding-top: 10px;*/
}

.tabdiv {
  padding: 20px;
  width: 100%;
}

.tabdiv h4 {
  padding: 0;
  margin: 0;
}

.mergers h3 {
  padding: 0;
  margin: 5px;
  text-align: center;
}

.mergers {
  margin: 1px;
}

.ftabContent {
  width: 100%;
}

.fTabContainer {
  padding: 5px;
}

.fTabContainer,
.ftabContent,
.main-tab-flex {
  display: flex;
}

.main-tab-flex {
  flex-direction: column;
}

.tab-title {
  width: 80%!important;
  height: auto!important;
  margin-bottom: 1px!important;
  padding: 5px!important;
  align-items: center;
  display: flex;
  justify-content: center;
}

.tab-title {
  border-right: 1px solid black;
  padding: 10px 0 3px 0;
  position: relative;
}

.tab-title span {
  color: #88481D;
  padding: 0 15px 10px 11px;
  text-align: center!important;
}

.tab-title:last-child span {
  border-right: none;
}

span.tablink {
  padding-bottom: 5px;
  position: relative;
}

.active {
  border-bottom: 2px solid rgb(255, 157, 39);
  padding-bottom: 10px;
}

.item-tab {
  display: flex;
  flex-direction: column;
}

.top {
  order: 1;
}

.middle {
  order: 2;
}

.bottom {
  order: 3;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Tabulation 1
<div class="main-tab-flex">
  <div class="fTabContainer">
    <div class="mergers">
      <h3><a class="tablink" data-tab="t1">Tab 1</a></h3>
    </div>
    <div class="mergers">
      <h3><a class="tablink" data-tab="t2">Tab 2</a></h3>
    </div>
    <div class="mergers">
      <h3><a class="tablink" data-tab="t3">Tab 3</a></h3>
    </div>
  </div>
  <div class="ftabContent">
    <div class="tabdiv" id="t1">
      <div class="content">Tab Content 1</div>
    </div>
    <div class="tabdiv" id="t2">
      <div class="content">Tab Content 2</div>
    </div>
    <div class="tabdiv" id="t3">
      <div class="content">Tab Content 3</div>
    </div>

  </div>
</div>

<div style="background-color:#333;border:4px solid black;"></div>
Tabulation 2


<div class="main-tab-flex">
  <div class="fTabContainer">
    <div class="mergers">
      <h3><a class="tablink" data-tab="t4">Tab 11</a></h3>
    </div>
    <div class="mergers">
      <h3><a class="tablink" data-tab="t5">Tab 22</a></h3>
    </div>
    <div class="mergers">
      <h3><a class="tablink" data-tab="t6">Tab 23</a></h3>
    </div>
  </div>
  <div class="ftabContent">
    <div class="tabdiv" id="t4">
      <div class="content">Tab Content 1</div>
    </div>
    <div class="tabdiv" id="t5">
      <div class="content">Tab Content 2</div>
    </div>
    <div class="tabdiv" id="t6">
      <div class="content">Tab Content 3</div>
    </div>
  </div>
</div>

1 个答案:

答案 0 :(得分：3)

如果要将行为限制为当前点击的组，则需要先使用closest()定位父级。

在你的例子中：

...
$(this).closest('.main-tab-flex').find(".tabdiv").not(tab).hide();
...


$(function() {
  var tabsArray = [];
  $(".tabdiv").each(function(index) {
    var elementID = $(this).attr("id"); //get UID of each tabdiv
    tabsArray.push("#" + elementID);
  });

  /*var first = document.querySelector('.tabdiv');*/
  //show only the first tabdiv in the tabulation
  $(tabsArray).each(function(index, element) {
    if (index === 0) {
      //get first elem of the array tabsArray
      $(element).show();
    } else {
      $(element).hide();
    }
  });
  $(".tablink").click(function() {
    var tab = '#' + $(this).data("tab");
    $(this).closest('.main-tab-flex').find(".tabdiv").not(tab).hide();
    $(tab).show();
  });
  //adds a class of active when the tab is clicked
  $('.mergers ').click(function() {
    if ($(this).hasClass("mergers")) {
      $('.mergers').removeClass('activeCol activeTxt');
      $(this).addClass("activeCol activeTxt");
      $(this).css('background-color', 'rgba(0,0,0,0) !important');
    }
  });

  


}); //end ready
.showFirst {
  display: block;
}

.activeCol {
  background-color: #ff8a8a;
}

.main-tab-flex {
  height: auto!important;
}

.mergers h3 {
  display: flex;
}

a.tablink {
  width: 100%;
}

.tabdiv h4,
.content {
  text-align: left;
}

.content {
  /*padding-top: 10px;*/
}

.tabdiv {
  padding: 20px;
  width: 100%;
}

.tabdiv h4 {
  padding: 0;
  margin: 0;
}

.mergers h3 {
  padding: 0;
  margin: 5px;
  text-align: center;
}

.mergers {
  margin: 1px;
}

.ftabContent {
  width: 100%;
}

.fTabContainer {
  padding: 5px;
}

.fTabContainer,
.ftabContent,
.main-tab-flex {
  display: flex;
}

.main-tab-flex {
  flex-direction: column;
}

.tab-title {
  width: 80%!important;
  height: auto!important;
  margin-bottom: 1px!important;
  padding: 5px!important;
  align-items: center;
  display: flex;
  justify-content: center;
}

.tab-title {
  border-right: 1px solid black;
  padding: 10px 0 3px 0;
  position: relative;
}

.tab-title span {
  color: #88481D;
  padding: 0 15px 10px 11px;
  text-align: center!important;
}

.tab-title:last-child span {
  border-right: none;
}

span.tablink {
  padding-bottom: 5px;
  position: relative;
}

.active {
  border-bottom: 2px solid rgb(255, 157, 39);
  padding-bottom: 10px;
}

.item-tab {
  display: flex;
  flex-direction: column;
}

.top {
  order: 1;
}

.middle {
  order: 2;
}

.bottom {
  order: 3;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Tabulation 1
<div class="main-tab-flex">
  <div class="fTabContainer">
    <div class="mergers">
      <h3><a class="tablink" data-tab="t1">Tab 1</a></h3>
    </div>
    <div class="mergers">
      <h3><a class="tablink" data-tab="t2">Tab 2</a></h3>
    </div>
    <div class="mergers">
      <h3><a class="tablink" data-tab="t3">Tab 3</a></h3>
    </div>
  </div>
  <div class="ftabContent">
    <div class="tabdiv" id="t1">
      <div class="content">Tab Content 1</div>
    </div>
    <div class="tabdiv" id="t2">
      <div class="content">Tab Content 2</div>
    </div>
    <div class="tabdiv" id="t3">
      <div class="content">Tab Content 3</div>
    </div>

  </div>
</div>

<div style="background-color:#333;border:4px solid black;"></div>
Tabulation 2


<div class="main-tab-flex">
  <div class="fTabContainer">
    <div class="mergers">
      <h3><a class="tablink" data-tab="t4">Tab 11</a></h3>
    </div>
    <div class="mergers">
      <h3><a class="tablink" data-tab="t5">Tab 22</a></h3>
    </div>
    <div class="mergers">
      <h3><a class="tablink" data-tab="t6">Tab 23</a></h3>
    </div>
  </div>
  <div class="ftabContent">
    <div class="tabdiv" id="t4">
      <div class="content">Tab Content 1</div>
    </div>
    <div class="tabdiv" id="t5">
      <div class="content">Tab Content 2</div>
    </div>
    <div class="tabdiv" id="t6">
      <div class="content">Tab Content 3</div>
    </div>
  </div>
</div>

相关问题
最新问题