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来使用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来显示它，并隐藏所有其他兄弟姐妹（注意我用类'某事'排除你的ul）：

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

Answer 2

以下是code to create switching tabs using jQuery and CSS：

<html>
<head>
<title>test</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script language="javascript" type="text/javascript">
   $(document).ready(
       function () 
       {
            $(".tabheader").each(
                function()
                {
                    var header = $(this);
                    header.find("ul li").mouseover(
                        function()
                        {
                            $(this).find("a").addClass('focus').closest("li").siblings().find("a").removeClass('focus');
                            header.next(".tabcontent").find("ul").eq($(this).index()).show().siblings().hide();
                        }
                    )
                }
            )
       }
   );
</script>
<style>
.tabheader li
{
    float:left;
    list-style:none;
}
a.focus {
    border-bottom: 1px #000000 solid;
    color: #FF0000;
    background: #000000;
}
.hide
{
    display:none;
}
</style>
</head>
<body>
<div class="tabheader">
    <ul>
        <li><a href="javascript:void">tab1</a></li>
        <li><a href="javascript:void">tab2</a></li>
        <li><a href="javascript:void">tab3</a></li>
    </ul>
</div>
<div class="tabcontent" style="clear:left">
    <ul>
        <li>tab1 content</li>
    </ul>
    <ul class="hide">
        <li>tab2 content</li>
    </ul>    
    <ul class="hide">
        <li>tab3 content</li>
    </ul>
</div>
</body>
</html>

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

2 个答案: