Question

我正在尝试使用其中几个标签功能在单个页面上显示内容。除此之外，它现在只显示一个div。请帮助，谢谢。

JAVA

$(function(){
    $('.tabs').hide();
    $('#tabs a').bind('click', function(e){
        $('#tabs a.current').removeClass('current');
        $('.tabs:visible').hide();
        $(this.hash).show();
        $(this).addClass('current');
        e.preventDefault();
    }).filter(':first').click();
});

HTML

<ul id="tabs">
<li><a href="#1">1</a></li>
<li><a href="#2">2</a></li>
</ul>
<div id="1" class="tabs">
Content 1
</div>
<div id="2" class="tabs">
Content 2
</div>

<ul id="tabs">
<li><a href="#3">3</a></li>
<li><a href="#4">4</a></li>
</ul>
<div id="3" class="tabs">
Content 3
</div>
<div id="4" class="tabs">
Content 4
</div>

Answer 1

试试这个：

<script>
    $(function(){
    $('.tabs, .tabs2').hide();
    $('#tabs a, #tabs2 a').bind('click', function(e){
    var cl = $(this).parent().parent().attr('id');
    if(cl=='tabs')
        {
        $('#tabs a.current').removeClass('current');
        $('.tabs:visible').hide();
        }
        else
        if(cl=='tabs2')
        {
        $('#tabs2 a.current').removeClass('current');
        $('.tabs2:visible').hide();
        }
        $(this.hash).show();
        $(this).addClass('current');
        e.preventDefault();
    }).filter(':first').click();
});
</script>
<ul id="tabs">
<li><a href="#1">1</a></li>
<li><a href="#2">2</a></li>
<li><a href="#3">3</a></li>
</ul>

<div id="1" class="tabs">
Content 1
</div>
<div id="2" class="tabs">
Content 2
</div>
<div id="3" class="tabs">
Content 3
</div>

<ul id="tabs2">
<li><a href="#33">3</a></li>
<li><a href="#4">4</a></li>
</ul>
<div id="33" class="tabs2">
Content 3
</div>
<div id="4" class="tabs2">
Content 4
</div>

我在两个标签中都使用了3（以解决另一个问题）。当你在任何一个标签中单击3时，它将始终显示第一个标签的第3个div，因为当执行this.hash时，它会查找＃3，每次它将返回id为3的第一个元素。所以我改变了＃第二个标签中的3到＃33。

希望这能解决您的问题。

显示多个JQuery选项卡

1 个答案: