Изменение location.hash с вкладками jquery ui

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

Я пробовал:

$("#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 где-то еще, мешая этому. Как принятый ответ, так и другой предложенный ответ слегка изменены, работают. Спасибо всем.

Ответы

Ответ 1

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

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

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

Ответ 2

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

Ответ 3

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

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

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

Ответ 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

Ответ 5

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

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

Ответ 6

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

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

Ответ 7

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

Ответ 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);
    }
});

Ответ 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;
   }
});

Ответ 11

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

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

Ответ 12

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

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

Ответ 13

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

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

Ответ 14

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

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

Ответ 15

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

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

Ответ 16

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

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

Ответ 17

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

window.location.hash="";