jquery - 显示多个 JQuery 选项卡

Question

我正在尝试使用其中的几个选项卡功能在单个页面上显示内容。除了现在，它只显示一个 div。请帮忙，谢谢。

http://jsfiddle.net/UtPxx

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。

希望这能解决您的问题。