用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(); 
});