用div顯示在兩個製表符/表格之間切換

Question

我想在aspx頁面中的兩個製表符（列表）之間切換。

有兩個標籤，div標籤以style =「display：block;」開頭。和style =「display：none;」分別。

我想在用戶點擊選項卡時在兩者之間切換。這是我的代碼。

<ul class="something" role="tablist"> 
    <li tabindex="0" class="random1" role="tab" aria-selected="true" aria-controls="application-tabs-1" aria-labelledby="ui-id-1"><a tabindex="-1" class="ui-tabs-anchor" id="ui-id-1" role="presentation" href="#application-tabs-1">Hello</a></li> 
    <li tabindex="-1" class="random2" role="tab" aria-selected="false" aria-controls="application-tabs-2" aria-labelledby="ui-id-2"><a tabindex="-1" class="ui-tabs-anchor" id="ui-id-2" role="presentation" href="#application-tabs-2">World</a></li> 
</ul> 

<div class="something-else1" id="application-tabs-1" role="tabpanel" aria-expanded="true" aria-hidden="false" aria-labelledby="ui-id-1" style="display: block;"> 
    <table class="applications"> 
     <thead> 
      <tr> 
       <th>Java</th><th>C</th> 
      </tr> 
     </thead> 
    </table> 
</div> 


<div class="something-else2" id="application-tabs-2" role="tabpanel" aria-expanded="false" aria-hidden="true" aria-labelledby="ui-id-2" style="display: none;"> 
    <table class="applications"> 
     <thead> 
      <tr> 
       <th>English</th><th>French</th> 
      </tr> 
     </thead> 
     <tbody> 
     </tbody> 
    </table> 
</div> 

我明白我需要創建一個jQuery使用標識表之間切換，並且我嘗試了不同的選擇，但沒有一次成功。

選項1

<script> 
    $("#application-tabs-2").show(); 
    $("#application-tabs-2").hide(); 
</script> 

選項2

<script> 
    $("#application-tabs-2").css("display", "block"); 
    $("#application-tabs-2").css("display", "none"); 
</script> 

選項3

<script> 
    $(document).ready(function displayChange(){ 
    $("application-tabs-1").toggle(); 
    $("application-tabs-2").toggle(); 
    }); 
</script> 

我該如何解決這個問題？

Answer 1

單擊一個選項卡後，您將需要調用一個函數。在函數，發現標籤的href以顯示它，並隱藏所有其他的兄弟姐妹（請注意，我用排除類的「東西」你UL）：

$(".ui-tabs-anchor").click(function(event) { 
    $("div#"+this.getAttribute('href')).show(); 
    $("div#"+this.getAttribute('href')).siblings().not('.something').hide(); 
});