Question

我有标签的自定义javascript代码，工作正常，但我试图将子标签放入其中，如下所示：

<div id="tabs" style="position:relative; ">
            <ul id="nav">
              <li><a href="#prizes">Prizes</a></li>
              <li><a href="#basket">Your sack</a></li>
              <li><a href="#order-history">Order History</a></li>
            </ul>

            <div id="tab-prizes" class="tab"> 
              <?php include('prizes.php');?>
            </div>

然后在prizes.php文件中：

<div id="tabsprizes" style="position:relative; ">
            <ul id="nav1">
              <li><a href="#branded">Weber Branded</a></li>
              <li><a href="#for-him">For Him</a></li>
            </ul>

            <div id="tab-branded" class="tab">

                <?php echo "fgdsd"; ?>

            </div>

我想要它，所以他们去了奖品标签，例如，其中有另一组标签，他们只能在该页面内使用。当前点击子选项卡时，所有内容都消失了。这是我的JS：

$("#parenttabs #nav a").click(function() {   //Parent Tabs Click Function
    var hash = this.getAttribute("href");
    if (hash.substring(0, 1) === "#") {
        hash = hash.substring(1);
    }

    location.hash = hash;
    showTab(hash);

    return false;
});

function showTab(hash) {
    $("div.tab").hide();
    $("#tab-" + hash).fadeIn();
}

对不起所有代码，不确定要显示的内容：/

由于

Answer 1

看一下JQuery UI tabs documentation，我看不到对tab-in-tab功能的引用。当然，假设你正在使用JQuery UI。

Here's an example标记JQuery UI嵌套选项卡。研究它，你可能能够找出你的代码无法正常工作的原因。

我建议您查看JQuery tools，因为它公开支持标签选项卡功能。

Here's an example JQuery工具嵌套标签标记和脚本。

Answer 2

如果您使用的是jQuery UI，嵌套选项卡应该没有问题。只需确保元素使用唯一ID

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">First Tab</a></li>
        <li><a href="#tabs-2">Second Tab</a></li>
    </ul>
    <div id="tabs-1">
        <p>Nothing to show..</p>
    </div>
    <div id="tabs-2">
        <p>Tabs in tab!</p>
        <div id="more-tabs">
            <ul>
                <li><a href="#nested-tabs-1">Child Tab 1</a></li>
                <li><a href="#nested-tabs-2">Child Tab 2</a></li>
            </ul>
            <div id="nested-tabs-1"><p>Content here...</p></div>
            <div id="nested-tabs-2"><p>More content here...</p></div>
        </div>
    </div>
</div>

jsFiddle example

选项卡中的jQuery选项卡未正确显示

2 个答案: