1

I have some jQuery tabs on a website and I am trying to make the tabs so they can be linked to directly.

What I mean by this is that, when a user enters a URL that includes the anchors for the tab, then when the page is loaded is should display that tab first.

My original jQuery code was gotten from http://jqueryfordesigners.com/jquery-tabs/ and did not include this ability. Here is the original code:

$(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();
});

I have modified the code to this:

$(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();


});

This kind of works - when you link to the page with the anchor included in the URL, it brings you to the relevant tab's content, however, and other tabs are visible also (its not hidden the others) and the tab has also not been selected.

You can view an example of this:

No link to second tab, first one shown by default: http://74.54.17.66/~innovarc/improve/success-stories/financial-performance/

Trying to link directly to the second tab: http://74.54.17.66/~innovarc/improve/success-stories/financial-performance/#financial-performance

I have tried to figure out what is wrong with the jQuery code but I cannot figure it out. I would appreciate help with a solution

4

1 回答 1

5

我编辑了您的代码以在此处创建一个工作示例（带有哈希的 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 哈希值为：

  • 成本改进

  • 财务绩效

  • 更换管理层

于 2012-06-19T02:12:00.413 回答