JQuery的隐藏和显示选项卡的内容

Question

我与JQuery的隐藏问题，显示选项卡

我有2个列表，我要显示和隐藏， 如果我点击<a href="#tab-description">Description</a>，那么我想展示div与id=tab-description。

如果我点击<a href="#tab-additional_information">Description</a>，那么我想显示div与id=tab-additional_information。

这是我的HTML和jQuery代码：

HTML：

<div class="col-sm-6" id="tabs-container"> 
     <div class="woocommerce-tabs"> 
      <ul class="tabs nav nav-tabs" id="myTabs"> 
       <li class="description_tab" role="presentation"> 
        <a href="#tab-description">Description</a> 
       </li> 
       <li class="additional_information_tab" role="presentation"> 
        <a href="#tab-additional_information">Additional Information</a> 
       </li> 
      </ul> 

      <div class="panel entry-content tab-pane" id="tab-description"> 
       <h2>Product Description</h2> 
       <p><strong>Electrolux Blender Glass 1.5L 450W – EBR2601</strong></p> 
       <p>Features :</p> 
       <ul> 
       <li>Power : 450 Watt</li> 
       <li>Kapaitas : 1.5 Liter</li> 
       <li>Jar : Kaca</li> 
       <li>Memiliki 3 level kecepatan + Tombol Pulse</li> 
       <li>Bisa menghancurkan es</li> 
       <li>4 mata pisau stainless steel</li> 
       <li>Kaki karet anti slip</li> 
       </ul> 
      </div> 

      <div class="panel entry-content tab-pane" id="tab-additional_information" style="display: none;"> 
       <h2 class="caption-additional-information">Additional Information</h2> 
       <table class="shop_attributes"> 
        <tbody> 
        <tr class=""> 
         <th>Weight</th> 
         <td class="product_weight">5 kg</td> 
        </tr> 
        </tbody> 
       </table> 
      </div> 
</div> 

这里是我的jQuery代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 

<script type="text/javascript"> 

$("#tab-additional_information").hide(); 

$(document).ready(function(){ 
    $(".tabs").find('li').each(function(index){ 

     $(".tabs").find('li').click(function(e){ 
      e.preventDefault(); 

      if($("#tab-additional_information").hide()){    
       $("#tab-additional_information").show(); 
       $("#tab-description").hide(); 

       if(("#tab-description").hide()){ 
        $("#tab-additional_information").hide(); 
        $("#tab-description").show(); 
       } 
      } 
     }); 
    }); 
}); 
</script> 

我的代码的结果就是可以点击一个标签，而另一个标签不能显示 我尝试了很多努力但是这一次是足够接近，我认为

感谢

Answer 1

试试这个：

$(document).ready(function(){ 
    $(".panel").hide(); /*Instead of hiding .panel here you can hide it by using css for first time */ 
    $("#myTabs li a").click(function(e){ 
     e.preventDefault(); 
     var showIt = $(this).attr('href'); 
     $(".panel").hide(); 
     $(showIt).show();   
    }) 
}); 

Answer 2

$("#tab-additional_information").hide(); 

$(document).ready(function(){ 
    $(".tabs").on('click', 'a', function(e){ 
     e.preventDefault(); 
     $('#tabs-container .entry-content').hide(); 
     $($(this).attr("href")).show(); 
    }); 
}); 

检查此琴：https://jsfiddle.net/vne715qx/1/

Answer 3

这段代码是最佳的，因为它增加了一个点击监听器你的页面，而不是很多，但也使它只能在href#开始的锚点。因此，如果你最终得到一个适当链接的锚点，它不会中断。如果你没有特定的类（你应该这样做，但为了防止你不能更改HTML），还给了你一种隐藏其他锚的方法。

$('.tabs li').on('click', 'a[href^="#"]', function(e) { // Apply click listener to anchors that start with '#' 
    e.preventDefault(); 
    var strID; 
    $('.tabs li a[href^="#"]').not(this).each(function() { // Get the anchors that haven't been clicked and hide the corresponding div. You can also do this with a blanket class such as $('.panel').hide(), but this assumes that ONLY these items have that class. 
     strID = $(this).attr('href'); 
     $(strID).hide();  
    }); 
    strID = $(this).attr('href'); 
    $(strID).show();  
}); 

Answer 4

你能做到以下几点，你想要的清单，以显示第一个div会在flip1点击其他将在flip2点击，并PANEL1和是Panel2将贵丽相关的代码

<script type="text/javascript"> 

    $(document).ready(function() { 
     $("#panel2").slideUp("fast") 

      $("#flip1").click(function() { 

       $("#panel1").slideToggle("slow"); 
       $("#panel2").slideUp("slow"); 

      }); 
       $("#flip2").click(function() { 

       $("#panel2").slideToggle("slow"); 
       $("#panel1").slideUp("slow"); 

      }); 


     }); 
    </script>