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>