jquery - タブの表示と非表示

Question

基本的なjQueryタブソリューションを機能させようとしています。リンクがクリックされたときにのみタブをレンダリングしたいと思います。ここの jQuery の例に従う と、ローカルホストで問題なくタブを表示できますが、ページへのリンクを導入するとすぐに、タブがレンダリングされなくなり、代わりに基になるタブのコンテンツが表示されます。

Stackoverflow を見ると、 hide() メソッドの使用を示唆する回答が表示されますが、わかりません:

• これがそれを行う方法である場合-つまり、ページの読み込み時にタブを作成してから非表示にしますか?

• 私はそれを正しく使用したかどうか？

• タブ グループに閉じるボタンを配置することもできますか (つまり、ボタンをクリックするとすべてのタブが消えます)。

私の jsFiddle はhereです。

Javascript:

$("#tabs").hide();
$("#link").click(function () {
    $("#tabs").tabs();
});

HTML:

<a href="#" id="link">Link text</a>
    <div id="tabs">
        <ul>
            <li><a href="#tabs-1">Tab 1</a></li>
            <li><a href="#tabs-2">Tab 2</a></li>
            <li><a href="#tabs-3">Tab 3</a></li>
        </ul>
        <div id="tabs-1">
            <p>Tab 1 text.</p>
        </div>
        <div id="tabs-2">
            <p>Tab 2 text.</p>
        </div>
        <div id="tabs-3">
            <p>Tab 3 text.</p>
        </div>
    </div>

Answer 1

実際にタブをインスタンス化することはありません。試す：

$("#tabs").tabs().hide();
$("#link").click(function () {
    $("#tabs").show();
});

jsFiddle の例

次のこともできることに注意してください。

$("#tabs").hide();
$("#link").click(function () {
    $("#tabs").tabs().show();
});

Answer 2

これを試してください:-

http://jsfiddle.net/adiioo7/wYKVy/3/

JS:-

jQuery(function () {

    $("#tabs").tabs();
    $("#ShowTabs").click(function () {
        $("#tabs").show();
    });

    $("#HideTabs").click(function () {
        $("#tabs").hide();
    });
});

HTML:-

<a href="#" id="ShowTabs">ShowTabs</a><br/>
<a href="#" id="HideTabs">HideTabs</a>

<div id="tabs" style="display:none;">
    <ul>
        <li><a href="#tabs-1">Tab 1</a>

        </li>
        <li><a href="#tabs-2">Tab 2</a>

        </li>
        <li><a href="#tabs-3">Tab 3</a>

        </li>
    </ul>
    <div id="tabs-1">
        <p>Tab 1 text.</p>
    </div>
    <div id="tabs-2">
        <p>Tab 2 text.</p>
    </div>
    <div id="tabs-3">
        <p>Tab 3 text.</p>
    </div>
</div>

Answer 3

Tabbable nav を試すことをお勧めします

ブートストラップ ナビ

それははるかに良くて簡単です。

Answer 4

$("tabs").show();そもそもタブを非表示にしているため、タブを作成した後。

タブを閉じるボタンについては、このhttp://jsfiddle.net/wYKVy/2/を参照してください。