1

我正在尝试让一个基本的 jQuery 选项卡解决方案正常工作。我希望仅在单击链接时才呈现选项卡。按照这里的 jQuery 示例， 我可以让选项卡在我的 localhost 上显示没有问题，但是一旦我引入指向页面的链接，选项卡就不再呈现，而是显示底层选项卡内容。

通过 Stackoverflow，我看到建议使用 hide() 方法的答案，但我不知道：

  • 如果这是这样做的方法 - 即在页面加载时创建标签然后隐藏它们？

  • 我是否正确使用它？

  • 是否也可以在选项卡组上有一个关闭按钮（即单击按钮，所有选项卡都会消失）？

我的 jsFiddle 在这里。

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>
4

4 回答 4

2

您从未实际实例化选项卡。尝试：

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

jsFiddle 示例

请注意，您还可以执行以下操作：

$("#tabs").hide();
$("#link").click(function () {
    $("#tabs").tabs().show();
});
于 2013-03-27T16:32:01.370 回答
1

试试这个： -

http://jsfiddle.net/adioo7/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>
于 2013-03-27T16:42:23.013 回答
1

我会建议尝试 Tabbable nav from

引导导航

这会更好，更容易。

于 2013-03-27T16:44:50.300 回答
0

$("tabs").show();创建选项卡后，因为您首先将它们隐藏起来。

有关关闭选项卡的按钮，请参见此 http://jsfiddle.net/wYKVy/2/。

于 2013-03-27T16:31:14.650 回答