change location.hash с вкладками jquery ui

Question

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

Я пробовал:

$("#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 > ul").tabs({ 
    select: function(event, ui) 
    { 
     window.location = "#" + ui.tab; 
    } 
}); 

Answer 3

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

Answer 4

Похоже, что ui.tab сам не возвращает допустимую строку. (вместо этого он возвращает undefined, поэтому вы бы сказали, что он ничего не возвращает.)

Попробуйте оглянуться в dev-версии ui.jquery.js, есть ли там какие-либо возвращения, возможно, вам нужно позвонить ребенок ui.tab ;-)

Answer 5

Я использую вкладку плагин вы можете найти его на GitHub: https://github.com/jquerytools/jquerytools.github.com

Answer 6

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

Answer 7

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

Это изящное решение предлагаемого here, решает эту проблему

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

Answer 8

Это работает для меня, 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 9

Многие из приведенных выше ответов донских Не работайте с текущей версией вкладок пользовательского интерфейса 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 10

Мой путь для 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 11

Это работал для меня с помощью Jquery 1.8

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

Answer 12

Этот код работает нормально для меня:

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

Answer 13

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

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

Answer 14

Этот фрагмент кода работает для меня:

window.location.hash=""; 

Answer 15

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

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

Answer 16

Этот код работает для меня:

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

Answer 17

Следующий код работает для меня ..

$("#tabs").tabs({ 
    activate : function(event, ui) { 
    window.location.hash = ui.newPanel[0].id; 
    } 
});