Question

我正在使用jQuery Tools库选项卡。你可以在这里找到它们： 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

引导我访问account-＆gt;个人资料标签。很简单。

现在我不确定这是否可以通过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函数绑定到锚点击，但在您的情况下，您只想在页面加载时调用它。

使用#hash URL（或其他方式）在选项卡中定位选项卡

1 个答案: