使用 #hash URL（或其他方式）的选项卡中的目标选项卡

Question

我正在使用 jQuery 工具库选项卡。你可以在这里找到它们： http://flowplayer.org/tools/tabs/index.html

我的基本标记是这样的：

$("#tab-holder ul").tabs("div.tab", { history: true, api: true })
$("#profile-sub-tabs ul.menu").tabs("div");

#profile-sub-tabs 是 #tab-holder 主界面中的另一个选项卡界面。该插件使用了一个名为 history 的参数，它基本上允许我使用它们的名称来定位选项卡，例如：

http://www.blah.com/tabs.aspx#account

会引导我进入帐户标签。这很好用，但我希望能够专门针对子标签。我知道这段代码不起作用，但理论是这样的：

http://www.blah.com/tabs.aspx#account#profile

将我带到帐户->个人资料选项卡。很简单。

现在我不确定这是否可以通过 URL 完成，或者我是否应该通过 Javascript（以某种方式）以某种方式处理请求并手动使用 API 切换到正确的选项卡。我只是不确定如何获取该数据以切换到正确的选项卡。

谢谢！

Answer 1

似乎没有针对此问题的官方解决方案。我自己成功推出了一个，只要您可以为每个子标签分配一个唯一的 ID，它就可以工作。

这个想法基本上是您实际上不需要告诉页面要打开哪个顶部选项卡，因为它可以通过查找正在请求的子选项卡来推断。因此，在您的链接中，您只需要引用子选项卡，如下所示：

http://www.blah.com/tabs.aspx#profile

在我开始之前，这里有一个现场演示，展示了这一点：http://jsfiddle.net/CrAU7/

假设你有一个像这样的 html 结构：

<div class="wrap">
    <!-- the tabs -->
    <ul class="tabs">
        <li><a href="#big1">Tab 1</a></li>
        <li><a href="#big2">Tab 2</a></li>
        <li><a href="#big3">Tab 3</a></li>
    </ul>
    <!-- tab "panes" -->
    <div class="pane" id="big1">
        <p>#1</p>
        <!-- the tabs -->
        <ul class="tabs">
            <li><a href="#big1small1">Tab 1</a></li>
            <li><a href="#big1small2">Tab 2</a></li>
            <li><a href="#big1small3">Tab 3</a></li>
        </ul>
        <!-- tab "panes" -->
        <div class="pane" id="big1small1">Tab 1 - First tab content.</div>
        <div class="pane" id="big1small2">Tab 1 - Second tab content</div>
        <div class="pane" id="big1small3">Tab 1 - Third tab content</div>
    </div>
    <div class="pane" id="big2">
        <p>#2</p>
        <!-- the tabs -->
        <ul class="tabs">
            <li><a href="#big2small1">Tab 1</a></li>
            <li><a href="#big2small2">Tab 2</a></li>
            <li><a href="#big2small3">Tab 3</a></li>
        </ul>
        <!-- tab "panes" -->
        <div class="pane" id="big2small1">Tab 2 - First tab content.</div>
        <div class="pane" id="big2small2">Tab 2 - Second tab content</div>
        <div class="pane" id="big2small3">Tab 2 - Third tab content</div>
    </div>
    <div class="pane" id="big3">
        <p>#3    </p>
        <!-- the tabs -->
        <ul class="tabs">
            <li><a href="#big3small1">Tab 1</a></li>
            <li><a href="#big3small2">Tab 2</a></li>
            <li><a href="#big3small3">Tab 3</a></li>
        </ul>
        <!-- tab "panes" -->
        <div class="pane" id="big3small1">Tab 3 - First tab content.</div>
        <div class="pane" id="big3small2">Tab 3 - Second tab content</div>
        <div class="pane" id="big3small3">Tab 3 - Third tab content</div>
    </div>
</div>

需要注意的重要一点是，我为选项卡窗格指定了一个唯一 ID，并且选项卡的 href 是相同的 ID，并以哈希为前缀。然后你需要一个这样的函数：

function TabByHash(hash) {
    var $myTab = $(hash);
    if ($myTab.size() != 0) {
        //alert('hi!');
        var $topTab = $myTab.parent().closest('.pane');
        if ($topTab.size() != 0) {
            $('a[href=#' + $topTab.attr('id') + ']').click();
        }
        $('a[href=#' + $myTab.attr('id') + ']').click();
    }
}

在页面加载时，您需要使用 url 的哈希部分调用函数：TabByHash(window.location.hash); 然后查找具有相应 ID 的选项卡窗格。如果窗格位于父窗格中，它首先激活该父窗格，然后激活请求的窗格。否则，它只会激活请求的窗格。希望这对你有用。

注意：由于 jsFiddle 演示的限制，我将 TabByHash 函数绑定到锚点点击，但在您的情况下，您可能只想在页面加载时调用它。