时间戳

首页 > 解决方案 > 在 DOM 中隐藏和显示嵌套元素

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

问题描述

我有以下标记，我想根据提供的类隐藏/显示 div。下面是我在 DOM 中某处的标记。您能否提供这样做的方法。有内容可用的选项卡面板，基于 id myId1 或 myId2，选项卡面板的适当 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>

标签： jquery

解决方案

你可以这样做......使用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>

推荐阅读