我有某种类似的标记,如上所示。
我想基于id innerfilter1,innerfilter2过滤内部文本元素。
我还编写了用于基于外部过滤器隐藏常规内容的代码。即myid1和myid2可以正常工作。这些ID将隐藏具有相同类的div
$('ul.nav.nav-tabs>li>a').click(function(){
var curtab = $(this).attr('href').substring(1);
console.log(curtab);
$('.tab-content .tab-pane').each(function(){
var tabid = this.className;
if(tabid.indexOf(curtab) > -1){
$(this).siblings().hide();
}
});
$(this).show();
});
});
但是嵌套的过滤器用于过滤不常见的内容,但具有过滤器innerfilter1,innerfilter2。我试过下面的代码,但这也会影响其他选项卡
$('div.inner-tab-box>ul.nav.nav-tabs>li>a').click(function(){
var curtab = $(this).attr('href').substring(1);
$('.tab-content .tab-pane').each(function(){
var tabid = this.id;
if(tabid.indexOf(curtab) > -1){
$(this).siblings().each( function () {
var tx=this.id;
if(tx==='general') {
} else {
$(this).hide();
}
});
$(this).show();
}
});
});
完整标记
<div class="top-header">
<div class="container-fluid">
<div class="header-top">
<!-- Tabs -->
<div id="tabs">
<!-- tabs start -->
<div class="tab-content">
<!-- part 1 Will execute 2 times as per filters-->
<div role="tabpanel" class="tab-pane active" id="myid1">
<div class="row">
<div class="col-xs-5ths ">
<div class="dark-box-outer">
<div class="top-light-text-box">
<div class="inner-tab-box ">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a href="#innerfilter1" aria-controls="home" role="tab" data-toggle="tab">></a></li>
<li role="presentation" class=""><a href="#innerfilter2" aria-controls="profile" role="tab" data-toggle="tab"></a></li>
</ul>
[B]<div class="tab-content">
<div role="tabpanel" class="tab-pane myid1 " id="innerfilter1">
<ul>
<li>
/* Some Content */
</li>
</ul>
</div>
<div role="tabpanel" class="tab-pane myid1 " id="innerfilter2">
<ul>
<li>
/* Some Content */
</li>
</ul>
</div>
<div role="tabpanel" class="tab-pane myid1 " id="general">
<ul>
<li>
/* Some Content */
</li>
</ul>
</div>
<div role="tabpanel" class="tab-pane myId2 " id="general">
<ul>
<li>
/* Some Content */
</li>
</ul>
</div>[/B]
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-5ths ">
<!-- Repeated Markup -->
</div>
<div class="col-xs-5ths ">
<!-- Repeated Markup -->
</div>
<div class="col-xs-5ths ">
<!-- Repeated Markup -->
</div>
<div class="col-xs-5ths ">
</div>
</div>
</div>
<!-- end part 1 -->
<div role="tabpanel" class="tab-pane " id="myId2">
<!--Repeated Content For myId2-->
</div>
<!-- end part 1 -->
</div>
<!-- End part 2 -->
</div>
</div>
<!-- ./Tabs -->
</div>
</div>
谁能帮我解决这个问题。
谢谢