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

Question

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

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

Answer 1

如果要将行为限制为当前单击的组，则需要首先使用nearest（）来定位父项。

在你的例子中：

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