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

我有下面的标记，我想根据提供的类隐藏/显示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>

//内容
//内容
//内容
//内容
... n次
//类似于上面的标记类型
//类似于上面的标记类型
//内容
... n次
//将重复上述相同的标记

您可以这样做…使用jquery

$（'ul.nav.nav tabs>li>a'）。单击（函数（）{
var curtab=$（this.attr（'href'）.substring（1）；
$（'.tab content.tab pane'）。每个（函数（）{
var tabid=this.className；
if（表索引of（curtab）>-1）{
$（this.sides（）.hide（）；
$（this.show（）；
}
});
});


ID1
ID2

//内容ID1
//内容ID1
//内容ID2
//内容ID2
... n次
//类似于上面的标记类型
//类似于上面的标记类型
//内容
... n次
//内容ID1
//内容ID1
//内容ID2
//内容ID2
... n次
//类似于上面的标记类型
//类似于上面的标记类型
//内容
... n次
Javascript在哪里？张贴的问题似乎根本不包括解决问题的方法。StackOverflow希望您能这样做，因为您的尝试有助于我们更好地了解您的需求。请编辑问题以显示您已尝试的内容，以便说明您遇到的具体障碍。有关更多信息，请参阅并使用。