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哈希值为:

• 成本提高

• 财务绩效

• 更换管理层