试试这个： -

Question

我试图让基本的jQuery标签解决方案正常工作。我希望仅在单击链接时才显示选项卡。在jQuery示例here之后，我可以在我的本地主机上显示没有问题的选项卡，但是一旦我引入了指向该页面的链接，标签就不再呈现，而是显示基础选项卡内容。

浏览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 example

请注意，您也可以这样做：

$("#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导航

Bootstrap Nav

会更好更容易。

Answer 4

创建选项卡后

$("tabs").show();，因为您首先将它们隐藏起来。

有关关闭标签的按钮，请参阅此http://jsfiddle.net/wYKVy/2/。

显示和隐藏标签

4 个答案:

试试这个： -

JS： -

HTML： -