使用#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界面中的另一个选项卡界面。插件使用的参数称为历史记录，该参数基本上允许我使用标签名称来定位标签，例如：

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

会带我到“帐户”标签。这工作正常，但我希望能够专门定位子选项卡。我知道这段代码行不通，但是理论是这样的：

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

引导我进入帐户->个人资料标签。很简单。

现在，我不确定是否可以通过URL进行操作，还是不确定是否应该通过Java脚本（以某种方式）处理请求并手动使用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函数绑定到锚定点击，但是在您的情况下，您只想在页面加载时调用它即可。