jquery - 使用 div 显示在两个选项卡/表格之间切换

Question

我想在 aspx 页面中的两个选项卡(列表)之间切换。

有两个带有 div 标签的标签以 style="display: block;"开头和样式 =“显示:无；”分别。

我想在用户单击选项卡时在两者之间切换。这是我的代码。

<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 来使用 ID 在表之间切换，我尝试了不同的选项，但没有一个有效。

选项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 以显示它，并隐藏所有其他 sibling (注意我排除了类为“something”的 ul):

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