jQuery 使 Twitter 引导标签持久化的最佳方法
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9685968/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Best way to make twitter bootstrap tabs persistent
提问by DanS
What is the best way of making these tabs persist?
使这些选项卡持久化的最佳方法是什么？
http://twitter.github.com/bootstrap/javascript.html#tabs
http://twitter.github.com/bootstrap/javascript.html#tabs
To add some context, this is for a rails application. I'm passing an array [tab1, tab2] to my view, rendering both tabs and using the bootstrap tab plugin to toggle their visibility.
添加一些上下文，这是针对 rails 应用程序的。我将数组 [tab1, tab2] 传递给我的视图，呈现两个选项卡并使用引导程序选项卡插件来切换它们的可见性。
回答by Sucrentheitroad
This code selects the right tab depending on the #hash and adds the right #hash when a tab is clicked. (this uses jquery)
此代码根据 #hash 选择正确的选项卡，并在单击选项卡时添加正确的 #hash。（这使用jquery）
In Coffeescript :
在 Coffeescript 中：
$(document).ready ->
if location.hash != ''
$('a[href="'+location.hash+'"]').tab('show')
$('a[data-toggle="tab"]').on 'shown', (e) ->
location.hash = $(e.target).attr('href').substr(1)
or in JS :
或在 JS 中：
$(document).ready(function() {
if (location.hash !== '') $('a[href="' + location.hash + '"]').tab('show');
return $('a[data-toggle="tab"]').on('shown', function(e) {
return location.hash = $(e.target).attr('href').substr(1);
});
});
回答by d-wade
I wanted to improve the best answer here..
我想在这里改进最佳答案..
Credit goes to Sucrentheitroad, but if you want to avoid jumping on the page when you change tabs, use this improved code:
归功于 Sucrentheitroad，但如果您想避免在更改选项卡时跳到页面上，请使用以下改进代码：
$(document).ready(function() {
// show active tab on reload
if (location.hash !== '') $('a[href="' + location.hash + '"]').tab('show');
// remember the hash in the URL without jumping
$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
if(history.pushState) {
history.pushState(null, null, '#'+$(e.target).attr('href').substr(1));
} else {
location.hash = '#'+$(e.target).attr('href').substr(1);
}
});
});
回答by HaNdTriX
Here is another way to solve the Problem.
这是解决问题的另一种方法。
First add a line to the click event to show the hash in the Addressbar
首先在点击事件中添加一行以在地址栏中显示哈希
$('#myTab').on('click', 'a', function (e) {
e.preventDefault();
// add this line
window.location.hash = $(this).attr('href');
$(this).tab('show');
})
Then make sure that the right tab is activated onloadby adding this part to your document ready call.
然后onload通过将此部分添加到您的文档就绪调用来确保激活了正确的选项卡。
if(window.location.hash){
$('#myTab').find('a[href="'+window.location.hash+'"]').tab('show');
}
All together you can write this:
你可以一起写这个：
// cache the id
var navbox = $('#myTab');
// activate tab on click
navbox.on('click', 'a', function (e) {
var $this = $(this);
// prevent the Default behavior
e.preventDefault();
// set the hash to the address bar
window.location.hash = $this.attr('href');
// activate the clicked tab
$this.tab('show');
})
// if we have a hash in the address bar
if(window.location.hash){
// show right tab on load (read hash from address bar)
navbox.find('a[href="'+window.location.hash+'"]').tab('show');
}
回答by Pavel Berka
I wanted to improve the best two answers here.. :)
我想在这里改进最好的两个答案.. :)
Credit goes to Sucrentheitroad and d-wade.
归功于 Sucrentheitroad 和 d-wade。
Because in code is used history API you can't use onchangehash (https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onhashchange). This code add the functionality of back button (https://developer.mozilla.org/cs/docs/Web/API/WindowEventHandlers/onpopstate).
因为在代码中使用了历史 API，你不能使用 onchangehash ( https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onhashchange)。此代码添加了后退按钮的功能（https://developer.mozilla.org/cs/docs/Web/API/WindowEventHandlers/onpopstate）。
// show active tab on reload
if (location.hash !== '') $('a[href="' + location.hash + '"]').tab('show');
// remember the hash in the URL without jumping
$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
if(history.pushState) {
history.pushState(null, null, '#'+$(e.target).attr('href').substr(1));
} else {
location.hash = '#'+$(e.target).attr('href').substr(1);
}
});
// remember to back button
window.onpopstate = function(e) {
$('a[href="' + location.hash + '"]').tab('show');
};
回答by Awsom3D
Tested for Bootstrap 4, minimalist (2 lines) code without history push, that works on any page with nav-tabs.
针对 Bootstrap 4 进行了测试，没有历史推送的极简（2 行）代码，适用于任何带有导航标签的页面。
<script type="text/javascript">
$(document).ready(function(){
// store the currently selected tab in the hash value
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { location.replace($(e.target).attr("href")); });
// switch to the currently selected tab when loading the page
$('.nav-tabs a[href="' + window.location.hash + '"]').tab('show');
});
</script>
回答by Greg Houston
Another modified version if you don't want tab clicks to be added to the history, but also don't want the page jumping up and down:
另一个修改版本，如果您不想将选项卡点击添加到历史记录中，但也不希望页面上下跳跃：
$(document).ready(function () {
if (location.hash !== '') {
$('a[href="' + location.hash + '"]').tab('show');
}
$("a[data-toggle='tab']").on("shown.bs.tab", function (e) {
var hash = $(e.target).attr("href");
if (hash.substr(0,1) == "#") {
var position = $(window).scrollTop();
location.replace("#" + hash.substr(1));
$(window).scrollTop(position);
}
});
});
回答by Artur Beljajev
Execute the following code after DOM load:
DOM加载后执行以下代码：
$('a[data-toggle=tab]').on('click', function () {
history.pushState(null, null, $(this).attr('href'));
});
if (window.location.hash) {
$('a[data-toggle=tab][href="' + window.location.hash + '"]').tab('show');
}
However, this leads to poor UI experience, since currently active tab will shown first, and then it will be switched to a tab from location.hash
但是，这会导致 UI 体验不佳，因为将首先显示当前活动的选项卡，然后将其从 location.hash 切换到选项卡
回答by Rory McCrossan
You can get the URL fragment (that's the part of the URL after #) on load using window.location.hash, and specifically set that tab as visible:
您可以#在加载时使用获取 URL 片段（即 之后的 URL 部分）window.location.hash，并专门将该选项卡设置为可见：
if (window.location.hash) {
$(window.location.hash).tab('show')
}
