jQuery UI的標籤，更新網址不同的標籤

我使用jQuery UI的選項卡上單擊時：http://jqueryui.com/demos/tabs/jQuery UI的標籤，更新網址不同的標籤

如何更新瀏覽器當前URL時，不同的選項卡上的用戶通過點擊將錨鏈接添加到它： ex：url.html＃tab-4並同時推送瀏覽器的當前歷史記錄。

謝謝！

來源

2012-03-19 Jerome Ansia

請問您能提供一些更多信息嗎？目前還不清楚你在問什麼... – 2012-03-19 20:37:45

好吧我會試試看起來很清楚：p – 2012-03-19 20:40:00

好的，讓我知道是否這樣很好;） – 2012-03-19 20:41:49

這應該得到你想要的。我用jQuery用戶界面演示樣本HTML

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

來源

2012-03-19 20:44:21 DG3

完美的，非常感謝 – 2012-03-19 20:59:42

@Jerome很高興幫助 – DG3 2012-03-19 21:05:20

這個平原不起作用。您是否在意詳細說明或更新您的答案？ – Kehlan 2013-07-25 18:17:06

對於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的版本

添加手LER你的標籤調用來更新與標籤ID的位置哈希：

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

你也可以創建你的UI選項卡後補充一點：

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

來源

2012-03-19 20:43:53

它的工作，但瀏覽器向下滾動到錨點另一種解決方案是完美的，但謝謝:) – 2012-03-19 20:53:25

當你說「你也可以添加這個」，你的意思是你可以或者你有嗎？答案的第一部分不能單獨使用。另外，'.bind（）'事件在我的頁面上永遠不會被擊中。 – Kehlan 2013-07-25 18:17:36

您可能正在使用更新版本的jQuery UI。 'show'方法在jQuery UI 1.9中被棄用，並且被移除了1.10。現在叫做'activate'。 jQuery不再支持'id'。你需要使用'.attr（'id'）'。上面的修改。 – 2013-07-25 19:38:01

我不得不用「創造」，而不是「激活」讓我最初的標籤在URL中顯示：

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

該解決方案似乎正在努力改變URL，但是當我回到URL時，它不會爲我切換標籤。我必須做些特別的事情才能在URL被擊中時切換選項卡嗎？

來源

2013-08-16 14:28:09 Billkamm

我記得在某個地方看到，爲了更新頁面，當哈希標籤通過回到歷史記錄而發生變化時，您需要一個JavaScript，它每隔幾秒就檢查一次url的哈希值，並根據需要在頁面上執行任何操作在那個散列（如果你只是爲了一組標籤使用片段，你可以簡單地激活相應的標籤）。 – JohnRDOrazio 2015-10-17 08:39:23

建立關閉傑夫B的工作上面...這與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 
    } 
}); 
});

來源

2015-01-23 20:27:29 eleclair

好的解決方案照顧滾動位置 – JohnRDOrazio 2015-10-17 08:45:24

其他答案的組合爲我工作。

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

來源

2015-02-06 14:32:52

首先，我們需要更新選項卡上的變化哈希（這是最新的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); 
    } 
    }); 
});

來源

2015-04-02 10:17:51

這一個適用於code.jquery.com/ui/1.12.1/jquery-ui.js – user1256378 2016-12-27 16:05:13

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

來源

2015-05-26 11:31:35

我用jQuery的響應選項卡中這種方法湊與活動標籤的URL。

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

來源

2016-06-22 12:25:13 Progrower

jQuery UI的標籤，更新網址不同的標籤

回答

相關問題