изменение location.hash с помощью вкладок jquery ui

Question

Я пытался найти способ изменить window.location.hash на текущую выбранную вкладку в вкладках пользовательского интерфейса Jquery .

Я пробовал:

$("#tabs > ul").tabs();
$("#tabs > ul").bind("tabsshow", function(event, ui) { 
window.location.hash = ui.tab;
})

Это приводит к изменению хеша на #undefined при смене вкладки.

Я тоже пробовал:

$("#tabs > ul").tabs({ 
select: function(event, ui) { 
window.location.hash = ui.tab }
});

Но, похоже, это вообще не сработало.

Любая помощь будет оценена. Спасибо.

Редактировать: Похоже, что часть моей первоначальной проблемы была связана с тем, что js где-то еще мешал этому. И принятый ответ, и другой предложенный ответ, слегка измененный, работают. Спасибо всем.

Answer 1

В вашей функции обработчика событий ui.tab является якорным элементом. Вы можете получить его хеш-значение следующим образом:

$("#tabs > ul").tabs();
$("#tabs > ul").bind("tabsshow", function(event, ui) { 
    window.location.hash = ui.tab.hash;
})

Это работает для вас?

Answer 2

$('#tabs').tabs({
    select: function(event, ui) {
        window.location.hash = ui.tab.hash;
    }
});

Answer 3

Хотя некоторые из вышеперечисленных решений работают, в некоторых случаях они заставляют страницу перепрыгивать, так как API window.location.hash предназначен для перехода к определенной части страницы.

Это аккуратное решение, предложенное здесь , решает эту проблему

  $("#tabs").bind("tabsshow", function(event, ui) { 
    history.pushState(null, null, ui.tab.hash);
  });

Answer 4

Это сработало для меня, jQuery UI 1.10:

$('#elexumaps_events_tabs').tabs({
    activate: function(event, ui) { 
       window.location.hash=ui.newPanel.selector; 
    }
});

Смотри также: http://api.jqueryui.com/tabs/#event-activate

Answer 5

мое простое решение без прыжков:

    $("#tabs").tabs({
        activate: function (event, ui) {
            var scrollPos = $(window).scrollTop();
            window.location.hash = ui.newPanel.selector;
            $(window).scrollTop(scrollPos);
        }
    });

Answer 6

Будет ли это то, что вы собираетесь?

$("#tabs > ul").tabs({ 
   select: function(event, ui) 
   { 
      window.location = "#" + ui.tab;
   }
});

Answer 7

$('#tabs').tabs({
    select: function(event, ui){
      window.location = ui.tab.href;
    }
});

Answer 8

Многие из приведенных выше ответов не работают с текущей версией вкладок пользовательского интерфейса jQuery. Вот что я сейчас использую:

var tabsUi = $('#tabs');
tabsUi.tabs();

// Add hash to URL when tabs are clicked
tabsUi.find('> ul a').click(function() {
    history.pushState(null, null, $(this).attr('href'));
});

// Switch to correct tab when URL changes (back/forward browser buttons)
$(window).bind('hashchange', function() {
    if (location.hash !== '') {
        var tabNum = $('a[href=' + location.hash + ']').parent().index();
        tabsUi.tabs('option', 'active', tabNum);
    } else {
        tabsUi.tabs('option', 'active', 0);
    }
});

Answer 9

Мой путь для jQuery UI 1.10.3

$("#tabs").tabs({
   beforeActivate: function(event, ui) {
        var hash = ui.newTab.children("li a").attr("href");
        window.location.hash = hash;
   }
});

Answer 10

Просмотрев некоторые другие вопросы и документы по API jQueryUI, я обнаружил, что это сработало для меня.

$(document).ready(function() {
    $("#tabs").tabs({
        activate: function( event, ui ) {
            location.hash = ui.newTab.children(".ui-tabs-anchor").attr("href").substr(1);
        }
    });
});