jquery - jQuery tabs tabs() - tab1 と tab2 に応じて個別の div を非表示にします

Question

tab1 が選択されたときに特定の div を表示したいと思います。tab2 と同じ。タブがクリックされたときにこれらの div を表示/非表示にする解決策を教えてください。アクティブな状態のこれらのタブの特定のクラスまたは ID を特定できません。私の要件は、タブ1がクリックされたときに表示する必要があることtab1とcontent1divです

以下はリンクです

http://jsfiddle.net/ucaxt/

Answer 1

外部コンテンツをタブ自体に移動する必要のない 1 つのアプローチは次のとおりです。

var contents = $('div[id^="content"]').hide();
$("#tabs").tabs({
    activate: function(evt, ui) {
        var num = ui.newPanel.attr('id').replace(/\D+/g, '');
        contents.hide();
        $('#content' + num).show();
    }
});​

JS フィドルのデモ。

ただし、このアプローチでは、クリックされたタブ、表示されたパネル、およびタブの外側の要素の間の関係を識別するために、表示されるすべてのコンテンツ要素idに番号を追加する必要があります。したがって、HTML は次のようになります。div

<div id="tabs">
    <ul>
        <li><a href="#tab1">Tab1</a></li>
        <li><a href="#tab2">Tab2</a></li>
    </ul>
    <div id="tab1">
        test1
    </div>
    <div id="tab2">
        test2
    </div>
</div>
<br/>
<div id="content1">
    <p>
        on click of first tab (tab1) I need to show this id as well
    </p>
</div>
<br/>
<div id="content2"> <!-- added the '2' to the id here -->
    <p>
        on click of Second tab (tab2) I need to show this id as well
    </p>
</div>

コンテンツ要素を外側のコンテナにラップするdivと、私のデモではidof がありcontainers、 をターゲットにdivして表示/非表示を少し変えることができます:

$("#tabs").tabs({
    activate: function(evt, ui) {
        var num = ui.newPanel.attr('id').replace(/\D+/g, '');
        $('#contents > div').eq(num - 1).show().siblings().hide();
    }
});

そしてHTMLで：

<div id="tabs">
    <ul>
        <li><a href="#tab1">Tab1</a></li>
        <li><a href="#tab2">Tab2</a></li>
    </ul>
    <div id="tab1">
        test1
    </div>
    <div id="tab2">
        test2
    </div>
</div>
<br/>
<div id="contents">
    <div id="content1">
        <p>
            on click of first tab (tab1) I need to show this id as well
        </p>
    </div>
    <br/>
    <div id="content2">
        <p>
            on click of Second tab (tab2) I need to show this id as well
        </p>
    </div>
</div>

JS フィドルのデモ。

OPが残したコメント（以下）に応じて、上記のコードを修正しました。

[オン] ページの読み込みで、コンテンツ div1 とタブ 1 コンテンツを表示する必要があります。

function showContent(evt, ui) {
    if (!evt || !ui) {
        return false;
    }
    else {
        // ui.newPanel in the activate event,
        // ui.panel in the create event
        var panel = ui.newPanel || ui.panel,
            num = panel.attr('id').replace(/\D+/g, '');
        $('#contents > div').eq(num - 1).show().siblings().hide();
    }
}
$(function() {
    $("#tabs").tabs({
        // runs the function when the tabs are created:
        create: function(evt, ui) {
            showContent(evt, ui);
        },
        // runs the function when the tabs are activated:
        activate: function(evt, ui) {
            showContent(evt, ui);
        }
    });
});​

JS フィドルのデモ。