вкладки интерфейса JQuery, обновление URL при щелчке на другой вкладке

Question

Я с помощью вкладок JQuery UI: http://jqueryui.com/demos/tabs/

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

Спасибо!

Answer 1

Это должно получить то, что вы хотите. Я использовал HTML выборки в JQuery UI демок

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

Answer 2

Для 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

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

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

Вы также можете добавить это после того, как ваш Tabs UI созданы:

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

кода демы: http://jsfiddle.net/jtbowden/ZsUBz/1/

Observable результат: http://fiddle.jshell.net/jtbowden/ZsUBz/1/show/light/

Answer 3

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

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

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

Answer 4

Строительство работы Джеффа Б выше ... это работает с 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 
    } 
}); 
}); 

Answer 5

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

$("#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 6

Во-первых, нам необходимо обновить хэш на изменение вкладки (это для последней 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 7

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

Answer 8

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

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