Вкладки пользовательского интерфейса jQuery, обновление URL при нажатии на другую вкладку

Question

Я использую вкладки jQuery UI: http://jqueryui.com/demos/tabs/

Как обновить текущий URL браузера , когда пользователь нажимает на другую вкладку, добавляя к ней ссылку привязки: ex: url.html # tab-4 и одновременное нажатие на текущую историю браузера.

Спасибо!

Answer 1

Для jQuery UI 1.10 и более поздних версий show устарело в пользу activate.Также id больше не действителен для jQuery.Используйте .attr('id') вместо этого.Наконец, используйте on('tabsactivate') вместо bind().

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

Метод пост-создания:

$("#myTabs").on( "tabsactivate", function(event, ui) {
    window.location.hash = ui.panel.id;
});

Демо: http://jsfiddle.net/RVHzV/

Наблюдаемый результат: http://jsfiddle.net/RVHzV/show/light/

Ранняя версия JQuery

Добавьте обработчик к вызову вкладки, чтобы обновить хэш местоположения с идентификатором вкладки:

$("#myTabs").tabs({
   // options ...
   show: function(event, ui) {
        window.location.hash = ui.panel.id;
   }
});

Вы также можете добавить это после создания вкладок пользовательского интерфейса:

$("#myTabs").bind( "tabsshow", function(event, ui) {
        window.location.hash = ui.panel.id;
});

Демонстрация кода: http://jsfiddle.net/jtbowden/ZsUBz/1/

Наблюдаемый результат: http://fiddle.jshell.net/jtbowden/ZsUBz/1/show/light/

Answer 2

Это должно получить то, что вы хотите (используя jQuery UI 1.8 , в версии 1.9 и более поздних версиях используйте событие активации , см. Другие ответы для примера кода).Я использовал образец HTML в демонстрационных версиях jQuery UI;

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

Answer 3

Во-первых, нам нужно обновить хэш при смене вкладки (это для последней версии jQueryUI):

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

Затем нам нужно обновить активную вкладку при изменении хеша (т.е. включить историю браузера, назад /кнопки вперед и пользователь вводят хеш вручную):

$(window).on('hashchange', function () {
  if (!location.hash) {
    $('#tabs').tabs('option', 'active', 0);
    return;
  }
  $('#tabs > ul > li > a').each(function (index, a) {
    if ($(a).attr('href') == location.hash) {
      $('#tabs').tabs('option', 'active', index);
    }
  });
});

Answer 4

$( "#tabs" ).tabs({            
        activate: function(event, ui) {
            //Key => random string
            //url => URL you want to set
            window.history.pushState({key:'url'},'','url');
        }
    });

Answer 5

Мне пришлось использовать «создать» вместо «активировать», чтобы моя первоначальная вкладка отображалась в URL:

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

Это решение, похоже, работает для изменения URL, но когда я идувернуться к URL, он не переключает вкладки для меня.Нужно ли делать что-то особенное, чтобы переключать вкладки при нажатии на этот URL?

Answer 6

Я использовал этот метод на своих адаптивных вкладках jQuery, чтобы хэшировать URL с активной вкладкой.

$(function() {
       $('#tabs, #subtabs').responsiveTabs({
            activate: function(event, ui) {
            window.location.hash = $("ul li.r-tabs-state-active a").attr("href");
        },
        startCollapsed: 'accordion'
       });
});

Answer 7

Комбинация других ответов здесь сработала для меня.

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

Answer 8

Построение вышеописанной работы Джеффа Б ... это работает с jQuery 1.11.1.

$("#tabs").tabs(); //initialize tabs
$(function() {
    $("#tabs").tabs({
        activate: function(event, ui) {
            var scrollTop = $(window).scrollTop(); // save current scroll position
            window.location.hash = ui.newPanel.attr('id'); // add hash to url
            $(window).scrollTop(scrollTop); // keep scroll at current position
    }
});
});