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，并且锚元素引用相关选项卡。

5.) 像这样设置标签面板标记：

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

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

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

• 成本改进

• 财务业绩

• 变更管理