Вкладки jQuery — ссылка непосредственно на вкладку

У меня есть несколько вкладок 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, но не могу понять. буду признателен за помощь в решении


jquery jquery-ui jquery-tabs
person Zach Nicodemous    schedule 19.06.2012    source источник

Ответы (1)


arrow_upward
5
arrow_downward

я отредактировал ваш код, чтобы создать здесь рабочий пример (url с хэшем):

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

вот как я заставил это работать:

1.) удалить методы .filter() и .click(), связанные с div.tabs ul.tabNavigation обработчиком события клика. эти методы всегда приводят к тому, что первая вкладка получает фокус.

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 содержит уникальный идентификатор, а элемент привязки ссылается на соответствующую вкладку.

5.) Настройте разметку панели вкладок следующим образом:

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

конечно, это поможет больше, если вы посмотрите на источник страницы, на которую я ссылаюсь. это даст вам лучший контекст.

Краткое примечание: допустимые значения хэша URL:

  • снижение затрат

  • финансовые показатели

  • управление изменениями

person chrisvillanueva    schedule 19.06.2012
comment
Спасибо за подробное объяснение того, как вы добились этой работы - это выше всяких похвал. Теперь я вижу, где что-то пошло не так! - person Zach Nicodemous; 19.06.2012
comment
@chrisvillanueva Привет. Как заменить '#cost-improvement' первым ul.tabNavigation li? - person Hugo; 10.04.2014