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

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 ，我没有看到任何关于选项卡中选项卡功能的引用。当然，假设您使用的是 JQuery UI。

Here's an example JQuery UI 嵌套选项卡的标记。研究一下，您也许能够找出代码无法按预期工作的原因。

我建议你看看 JQuery tools ，因为它确实公开支持选项卡中的功能。

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