使twitter引导标签持久化的最佳方法
什么是使这些标签持续的最佳方式？
http://twitter.github.com/bootstrap/javascript.html#tabs
要添加一些上下文，这是一个rails应用程序。 我将数组[tab1，tab2]传递给我的视图，呈现两个选项卡，并使用引导选项卡插件切换其可见性。
此代码根据#hashselect正确的选项卡，并在单击选项卡时添加右侧的#hash。 （这使用jquery）
在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) 或在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); }); });
我想在这里改进最好的答案..
值得信赖的是Sucrenoir，但是如果你想避免在改变标签时在页面上跳跃，使用这个改进的代码：
$(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); } }); });
这是解决问题的另一种方法。
首先在click事件中添加一行以在地址栏中显示散列
$('#myTab').on('click', 'a', function (e) { e.preventDefault(); // add this line window.location.hash = $(this).attr('href'); $(this).tab('show'); })
然后确保通过将此部分添加到文档准备就绪的调用中激活了正确的选项卡。
if(window.location.hash){ $('#myTab').find('a[href="'+window.location.hash+'"]').tab('show'); }
一起你可以写这个：
// 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'); }
我想在这里提高最好的两个答案.. 🙂
信用去Sucrenoir和d-wade。
因为在代码中使用历史API，你不能使用onchangehash（ https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onhashchange ）。 这段代码添加了后退button的function（ 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'); };
您可以使用window.location.hash加载的URL片段（这是#之后的URL部分），并将该选项卡专门设置为可见：
if (window.location.hash) { $(window.location.hash).tab('show') }
另一个修改版本，如果你不希望标签点击被添加到历史，但也不希望页面上下跳动：
$(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); } }); });
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'); }
但是，这会导致较差的UI体验，因为当前的活动选项卡将首先显示，然后将切换到位置的选项卡.hash
