0

このタブ機能のいくつかを使用して、1 つのページにコンテンツを表示しようとしています。ただし、現時点では、1 つの div のみが表示されます。助けてください、ありがとう。

http://jsfiddle.net/UtPxx

ジャワ

$(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>
4

1 に答える 1

0

これを試して：

<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 の最初の要素が返されるためです。 2 番目のタブの 3 ～ #33。

これで問題が解決することを願っています。

于 2013-08-07T07:05:40.903 に答える