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

我在一个网站上有一些jQuery选项卡，我正在尝试制作这些选项卡，以便它们可以直接链接到

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

我最初的jQuery代码是从中获得的，不包括此功能。以下是原始代码：

$(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/改进/成功案例/财务绩效/#财务绩效

---

我试图找出jQuery代码的错误，但我无法找出它。如果您能提供解决方案，我将不胜感激。

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

以下是我是如何做到这一点的：

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

2.）创建一个选定的选项卡哈希，如下所示：

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

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

“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.）按如下方式设置选项卡面板标记：

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

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

第二
....

当然，如果您查看我链接的页面的源代码，会有更大的帮助。它会给你更好的语境

快速注意：有效的url哈希值为：

• 成本改进
• 财务业绩
• 变革管理

---

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

以下是我是如何做到这一点的：

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

2.）创建一个选定的选项卡哈希，如下所示：

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

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

“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.）按如下方式设置选项卡面板标记：

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

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

第二
....

当然，如果您查看我链接的页面的源代码，会有更大的帮助。它会给你更好的语境

快速注意：有效的url哈希值为：

• 成本改进
• 财务业绩
• 变革管理

---

感谢您对这项工作的详细解释，这超出了您的能力范围。我知道现在哪里出了问题@克里斯·维拉纽娃你好。我如何用第一个

ul.tabNavigation li

替换

“#成本改进”

？感谢您详细解释了您是如何工作的-这超出了您的能力范围。我知道现在哪里出了问题@克里斯·维拉纽娃你好。如何用第一个

ul.tab导航li

替换

“#成本改进”

？