javascript - 带有#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 来完成，或者我是否应该以某种方式通过 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>

需要注意的重要一点是，我给了选项卡 Pane 一个唯一的 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();
    }
}

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

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