在DOM中隐藏和显示嵌套元素

Question

我在下面的标记中，要根据提供的类隐藏/显示div。下面是我在DOM中的某个地方的标记。您能提供一种方法吗？在其中存在可用内容的tabpanel，并且应基于id myId1或myId2来隐藏并显示适当的tabpanel div。

 <div id="tabs">
    <div class="hader-tabing">
       <nav>
          <div id="nav-tab">
             <ul class="nav nav-tabs">
                <li><a href="#myId1"></li>
                <li><a href="#myId2"></li>
             </ul>
          </div>
       </nav>
    </div>
    <!-- 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 ">
                         <div class="tab-content">
                            <div role="tabpanel" class="tab-pane myId1  " >
                               //content
                            </div>
                            <div role="tabpanel" class="tab-pane myId1  ">
                               // content
                            </div>
                            <div role="tabpanel" class="tab-pane myId2 ">
                              // content
                            </div>
                            <div role="tabpanel" class="tab-pane myId2 ">
                              // content
                            </div>
                            ... n times
                         </div>
                      </div>
                   </div>
                   <div class="top-light-text-box">
                      // similar type of markup as above

                    </div>
                   <div class="top-light-text-box">
                         // similar type of markup as above
                   </div>
                </div>
             </div>
             <div class="col-xs-5ths ">
                // content
             </div>
             ... n times
          </div>
        </div>
        <div role="tabpanel" class="tab-pane active" id="myId2">
          // same markup will repeated as above
        </div>
     </div>
    </div>

Answer 1

您可以这样做...使用jquery，

$('ul.nav.nav-tabs>li>a').click(function(){
  var curtab = $(this).attr('href').substring(1);
  $('.tab-content .tab-pane').each(function(){
    var tabid = this.className;
    if(tabid.indexOf(curtab) > -1){
      $(this).siblings().hide();
      $(this).show();
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="tabs">
    <div class="hader-tabing">
       <nav>
          <div id="nav-tab">
             <ul class="nav nav-tabs">
                <li><a href="#myId1">ID1</li>
                <li><a href="#myId2">ID2</li>
             </ul>
          </div>
       </nav>
    </div>
    <!-- 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 ">
                         <div class="tab-content">
                            <div role="tabpanel" class="tab-pane myId1  " >
                               //content ID1
                            </div>
                            <div role="tabpanel" class="tab-pane myId1  ">
                               // content ID1
                            </div>
                            <div role="tabpanel" class="tab-pane myId2 ">
                              // content ID2
                            </div>
                            <div role="tabpanel" class="tab-pane myId2 ">
                              // content ID2
                            </div>
                            ... n times
                         </div>
                      </div>
                   </div>
                   <div class="top-light-text-box">
                      // similar type of markup as above

                    </div>
                   <div class="top-light-text-box">
                         // similar type of markup as above
                   </div>
                </div>
             </div>
             <div class="col-xs-5ths ">
                // content
             </div>
             ... n times
          </div>
        </div>
        <div role="tabpanel" class="tab-pane active" id="myId2">
          <div class="row">
             <div class="col-xs-5ths ">
                <div class="dark-box-outer">
                   <div class="top-light-text-box">
                      <div class="inner-tab-box ">
                         <div class="tab-content">
                            <div role="tabpanel" class="tab-pane myId1  " >
                               //content ID1
                            </div>
                            <div role="tabpanel" class="tab-pane myId1  ">
                               // content ID1
                            </div>
                            <div role="tabpanel" class="tab-pane myId2 ">
                              // content ID2
                            </div>
                            <div role="tabpanel" class="tab-pane myId2 ">
                              // content ID2
                            </div>
                            ... n times
                         </div>
                      </div>
                   </div>
                   <div class="top-light-text-box">
                      // similar type of markup as above

                    </div>
                   <div class="top-light-text-box">
                         // similar type of markup as above
                   </div>
                </div>
             </div>
             <div class="col-xs-5ths ">
                // content
             </div>
             ... n times
          </div>
        </div>
     </div>
    </div>