0

メニューがあり、タブをクリックすると、ビューアに現在表示されているものを非表示にし、クリックしたタブに対応するコンテンツを表示したい (すべてのタブ)。

<div id="main_view">
    <ul>
        <li id="tab_1">tab 1 </li>
        <li id="tab_2">tab 2 </li>
        <li id="tab_3">tab 3 </li>
    </ul>
    <div id="tab_1_content"> </div>
    <div id="tab_2_content"> </div>
    <div id="tab_3_content"> </div>
</div>

しかし、私は次のようなことをしたくありません。

//tab, 2 and 3 content starts as hidden:
$('#tab_2_content').hide();
$('#tab_3_content').hide();

$('#tab_2').click(function, () {
    $('#tab_2_content').show();
    $('#tab_1_content').hide();
    $('#tab_3_content').hide();
});

これを達成するための最も効率的な方法は何ですか?

4

2 に答える 2

1

私はお勧めします：

$('li[id^="tab_"]').click(function(){
    $('div[id^="tab_"]').hide();
    $('#' + this.id + '_content').show();
});

JS フィドルのデモ。

または：

$('li').click(function(){
    $(this).closest('ul').nextAll('div').hide().eq($(this).index()).show();
});

JS フィドルのデモ。

参考文献:

于 2013-02-14T19:13:43.143 に答える
0

タブにクラスを与える

<div id="tab_1 tab">

次に、$（ "li.tab"）。hide（）を実行すると、タブクラスのすべてのタブが非表示になります。それで：

$($(this).attr("id") + "_content").show();

さて、あなたはアイデアを得る。空欄に記入するだけです。

于 2013-02-14T19:15:18.480 に答える