jQuery选项卡 - 直接链接到选项卡

Question

我在网站上有一些jQuery标签，我正在尝试制作标签，以便它们可以直接链接。

我的意思是，当用户输入包含选项卡锚点的URL时，加载页面时应首先显示该选项卡。

我原来的jQuery代码是从http://jqueryfordesigners.com/jquery-tabs/获得的，并没有包含此功能。这是原始代码：

$(function () {
    var tabContainers = $('div.tabs > div');

    $('div.tabs ul.tabNavigation a').click(function () {
        tabContainers.hide().filter(this.hash).show();

        $('div.tabs ul.tabNavigation a').removeClass('selected');
        $(this).addClass('selected');

        return false;
    }).filter(':first').click();
});

我已将代码修改为：

$(function () {
    var tabs = [];
    var tabContainers = $('div.tabs > div');
    $('div.tabs ul.tabNavigation a').each(function () {
        if (this.pathname == window.location.pathname) {
            tabs.push(this);
            tabContainers.push($(this.hash).get(0));
        }
    });

// sniff for hash in url, and create filter search 
var selected = window.location.hash ? '[hash=' + window.location.hash + ']' : ':first'; 

$(tabs).click(function () {
    // hide all tabs
    $(tabContainers).hide().filter(this.hash).show();        
    // set up the selected class
    $(tabs).removeClass('selected');
    $(this).addClass('selected');        
    return false;
}).filter(selected).click();


});

这种工作方式 - 当您链接到包含在URL中的锚点的页面时，它会将您带到相关选项卡的内容，然而，其他选项卡也可见（它不会隐藏其他选项卡）并且选项卡具有也没有被选中。

您可以查看以下示例：

没有指向第二个标签的链接，默认情况下显示第一个标签：http://74.54.17.66/~innovarc/improve/success-stories/financial-performance/

尝试直接链接到第二个标签：http://74.54.17.66/~innovarc/improve/success-stories/financial-performance/#financial-performance

我试图弄清楚jQuery代码有什么问题，但我无法弄明白。我很感激帮助解决方案

Answer 1

我编辑了你的代码以在这里创建一个工作示例（带有哈希的url）：

http://chrisvillanueva.com/stackoverflow/tabs.html#financial-performance

这是我如何使它发挥作用：

1。）删除与“div.tabs ul.tabNavigation a”点击事件处理程序链接的.filter（）和.click（）方法。这些方法总是会让第一个标签获得焦点。

2。）创建一个选定的标签哈希，如下所示：

var selectedTab = window.location.hash ? window.location.hash : '#cost-improvement';

“selectedTab”将包含我们用于标签#id引用的值。

3.）然后使用以下行初始化请求的选项卡：

//initalizes tab in url
  $('div.tabs ul.tabNavigation li'+selectedTab+' a').addClass('selected');
  tabContainers.hide().filter($(''+selectedTab+'-tab')).show();

4。）在选项卡标记中，使用以下语法定义每个列表项元素：

<li id="financial-performance"><a href="#financial-performance-tab">Second</a></li>

其中li包含唯一ID，而anchor元素引用相关选项卡。

5.。）设置标签面板标记，如下所示：

<div id="financial-performance-tab">
       <h2>Second</h2>
        ....

当然，如果您查看我链接的页面的来源，它会有所帮助。它会给你更好的背景。

快速说明：有效的网址哈希值为：

• 成本提高

• 金融性能

• 变更管理