问题

I'm trying to get a basic jQuery tabs solution working. I would like the tabs to render only when a link is clicked. Following the jQuery example here I can get the tabs showing no problem on my localhost, but as soon as I introduce a link to the page the tabs no longer render and instead the underlying tab content is displayed.

Looking through Stackoverflow I see answers suggesting the use of the hide() method but I don't know:

if this is the way to do it - i.e. create the tabs on page load then hide them?
whether I've used it correctly?
Is it also possible to have a close button on the tab group (i.e. click the button and all the tabs disappear)?

My jsFiddle is 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>

回答1:

$("tabs").show(); after you create the tabs, since you're hiding them in the first place.

See this http://jsfiddle.net/wYKVy/2/ for the button to close the tabs.

回答2:

You never actually instantiate the tabs. Try:

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

jsFiddle example

Note that you could also do:

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

回答3:

Try this out:-

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>

回答4:

I will sugest to try Tabbable nav from

Bootstrap Nav

It would be much better and easier.

来源：https://stackoverflow.com/questions/15664094/show-and-hide-tabs

标签

jquery

css

Show and hide tabs

问题