我正在使用Twitter Bootstrap及其“标签”。
我有以下代码：
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#add">add</a></li>
<li><a data-toggle="tab" href="#edit" >edit</a></li>
<li><a data-toggle="tab" href="#delete" >delete</a></li>
</ul>
标签工作正常，但网址中没有添加#add，＃edit，＃delete。
当我删除data-toggle网址更改时，但标签不起作用。
任何解决方案吗？
答案 0 :(得分：239)
试试这段代码。它根据页面加载的哈希值将tab href添加到url +打开选项卡：
$(function(){
var hash = window.location.hash;
hash && $('ul.nav a[href="' + hash + '"]').tab('show');
$('.nav-tabs a').click(function (e) {
$(this).tab('show');
var scrollmem = $('body').scrollTop() || $('html').scrollTop();
window.location.hash = this.hash;
$('html,body').scrollTop(scrollmem);
});
});
答案 1 :(得分：48)
完整解决方案需要三个组件：
我认为这里的任何评论或接受的答案都不会处理所有这些情况。
由于涉及到很多，我认为它是最小的jQuery插件：https://github.com/aidanlister/jquery-stickytabs
您可以这样调用插件：
$('.nav-tabs').stickyTabs();
我为此撰写了一篇博文http://aidanlister.com/2014/03/persisting-the-tab-state-in-bootstrap/
答案 2 :(得分：24)
使用data-toggle="tab" 要求插件来处理标签，这些标签会在事件（code on github）上调用preventDefault。
您可以使用自己的标签激活，让事件通过：
$('.nav-tabs a').click(function (e) {
// No e.preventDefault() here
$(this).tab('show');
});
您必须删除属性data-toggle="tab"
如果您有疑问，请检查the doc。
答案 3 :(得分：10)
由于您的锚元素已经更改了网址哈希，因此收听onhashchange事件是另一个不错的选择。正如@flori已经提到的，这种方法适用于浏览器后退按钮。
var tabs$ = $(".nav-tabs a");
$( window ).on("hashchange", function() {
var hash = window.location.hash, // get current hash
menu_item$ = tabs$.filter('[href="' + hash + '"]'); // get the menu element
menu_item$.tab("show"); // call bootstrap to show the tab
}).trigger("hashchange");
最后，在定义侦听器之后触发事件也有助于在页面加载时显示正确的选项卡。
答案 4 :(得分：3)
我的问题解决方案：
首先为每个data-value链接添加新的a属性，如下所示：
<ul class="nav nav-tabs">
<li class="active">
<a data-toggle="tab" href="#tab-add" data-value="#add">add</a>
</li>
<li>
<a data-toggle="tab" href="#tab-edit" data-value="#edit">edit</a>
</li>
<li>
<a data-toggle="tab" href="#tab-delete" data-value="#delete">delete</a>
</li>
</ul>
其次，更改标签的ID，例如从add到tab-add，还要更新href以包含tab-前缀：
<div class="tab-content">
<div class="tab-pane" id="tab-add">Add panel</div>
<div class="tab-pane" id="tab-edit">Edit panel</div>
<div class="tab-pane" id="tab-delete">Panel panel</div>
</div>
最后是js代码：
<script type="text/javascript">
$(function () {
var navTabs = $('.nav-tabs a');
var hash = window.location.hash;
hash && navTabs.filter('[data-value="' + hash + '"]').tab('show');
navTabs.on('shown', function (e) {
var newhash = $(e.target).attr('data-value');
window.location.hash = newhash;
});
})
</script>
以下是jsFiddle - 但由于jsFiddle使用的iframe不起作用，但您可以阅读我的解决方案的来源。
答案 5 :(得分：3)
与CakePHP和Bootstrap 3标签相同的问题，加上当我发送外部URL和锚点时，它跳转到丢失我的菜单的部分，在审查了很多解决方案之后......
感谢：http://ck.kennt-wayne.de/2012/dec/twitter-bootstrap-how-to-fix-tabs
$(document).ready(function()
{
//Redirecciona al tab, usando un prefijo al cargar por primera vez, al usar redirect en cake #_Pagos
//Redirecciona al tab, usando #Pagos
/* Automagically jump on good tab based on anchor; for page reloads or links */
if(location.hash)
{
$('a[href=' + location.hash + ']').tab('show');
}
//Para evitar el bajar al nivel del tab, (al mostrarse el tab subimos)
$('a[data-toggle="tab"]').on('shown.bs.tab', function(e)
{
location.hash = $(e.target).attr('href').substr(1);
scrollTo(0,0);
});
//Actualiza el URL con el anchor o ancla del tab al darle clic
/* Update hash based on tab, basically restores browser default behavior to
fix bootstrap tabs */
$(document.body).on("click", "a[data-toggle]", function(event)
{
location.hash = this.getAttribute("href");
});
//Redirecciona al tab, al usar los botones de regresar y avanzar del navegador.
/* on history back activate the tab of the location hash if exists or the default tab if no hash exists */
$(window).on('popstate', function()
{
//Si se accesa al menu, se regresa al tab del perfil (activo default), fixed conflict with menu
//var anchor = location.hash || $("a[data-toggle=tab]").first().attr("href");
var anchor = location.hash;
$('a[href=' + anchor + ']').tab('show');
});
});//Fin OnReady
答案 6 :(得分：2)
还有一种简单的方法可以对哈希更改做出反应（例如后退按钮）。只需将一个hashchange事件监听器添加到tomaszbak解决方案：
$(function(){
// Change tab on load
var hash = window.location.hash;
hash && $('ul.nav a[href="' + hash + '"]').tab('show');
$('.nav-tabs a').click(function (e) {
$(this).tab('show');
var scrollmem = $('body').scrollTop();
window.location.hash = this.hash;
$('html,body').scrollTop(scrollmem);
});
// Change tab on hashchange
window.addEventListener('hashchange', function() {
var changedHash = window.location.hash;
changedHash && $('ul.nav a[href="' + changedHash + '"]').tab('show');
}, false);
});
答案 7 :(得分：1)
我正在使用Bootstrap 3.3。*并且上述解决方案都没有帮助我，甚至标记为答案一。我刚刚添加了下面的脚本并且工作了。
select
gm2.member_id,
gm1.game_id
from
game_members gm1
inner join game_members gm2 on
gm1.game_id = gm2.game_id -- lookup the game's current players
where
gm1.member_id = '863fdf91-86fb-49a7-9232-bcb596e3a86f' -- lookup the player's current game
希望这会对你有所帮助。
答案 8 :(得分：0)
最简单，假设您使用了here所述的data-toggle="tab"语法文档：
$(document).on('shown.bs.tab', function(event) {
window.location.hash = $(event.target).attr('href');
});
答案 9 :(得分：0)
对于使用Ruby on Rails或任何其他服务器端脚本的用户，您将需要在路径上使用anchor选项。这是因为一旦页面加载，它就没有可用的URL哈希。您需要通过链接或表单提交提供正确的选项卡。
<%= form_for @foo, url: foo_path(@foo, anchor: dom_id(foo)) do |f| %>
# Or
<%= link_to 'Foo', foo_path(@foo, anchor: dom_id(foo)) %>
如果您使用前缀来阻止窗口跳转到id：
<%= form_for @foo, url: foo_path(@foo, anchor: "bar_#{dom_id(foo)}") do |f| %>
然后你CoffeeScript：
hash = document.location.hash
prefix = 'bar_'
$('.nav-tabs a[href=' + hash.replace(prefix, '') + ']').tab 'show' if hash
$('.nav-tabs a').on 'shown.bs.tab', (e) ->
window.location.hash = e.target.hash.replace '#', '#' + prefix
或JavaScript：
var hash, prefix;
hash = document.location.hash;
prefix = 'bar_';
if (hash) {
$('.nav-tabs a[href=' + hash.replace(prefix, '') + ']').tab('show');
}
$('.nav-tabs a').on('shown.bs.tab', function(e) {
window.location.hash = e.target.hash.replace('#', '#' + prefix);
});
这应该在Bootstrap 3中有效。
答案 10 :(得分：0)
感谢原始解决方案的 @tomaszbak ，但由于我的编辑遭到拒绝，我无法对他的帖子发表评论，但我将在此处留下略微改进且更具可读性的版本。
它基本上做了同样的事情，但如果修复了我与他的交叉浏览器兼容性问题。
$(document).ready(function(){
// go to hash on window load
var hash = window.location.hash;
if (hash) {
$('ul.nav a[href="' + hash + '"]').tab('show');
}
// change hash on click
$('.nav-tabs a').click(function (e) {
$(this).tab('show');
if($('html').scrollTop()){
var scrollmem = $('html').scrollTop(); // get scrollbar position (firefox)
}else{
var scrollmem = $('body').scrollTop(); // get scrollbar position (chrome)
}
window.location.hash = this.hash;
$('html,body').scrollTop(scrollmem); // set scrollbar position
});
});
答案 11 :(得分：0)
以上都没有为我工作，所以这就是我的工作方式：
class="tab-link"添加到需要此功能的所有链接 window.addEventListener
(
'popstate',
function( event )
{
tab_change();
}
);
function tab_change()
{
var hash = window.location.hash;
hash && $( 'ul.nav a[href="' + hash + '"]' ).tab( 'show' );
$( '.tab-link' ).click
(
function( e )
{
$( this ).tab( 'show' );
var scrollmem = $( 'body' ).scrollTop() || $( 'html' ).scrollTop();
window.location.hash = this.hash;
$( 'html,body' ).scrollTop( scrollmem );
$( 'ul.nav-tabs a[href="' + window.location.hash + '"]' ).tab( 'show' );
}
);
}
答案 12 :(得分：0)
我了解OP曾说过使用JQuery，但是您可以简单地使用普通JS来做到这一点：
document.querySelectorAll('ul.nav a.nav-link').forEach(link => {
link.onclick = () => window.history.pushState(null, null, link.attributes.href.value);
});
答案 13 :(得分：-2)
这也修复了一个非常模糊的选项卡，当使用jquery和bootstrap时，href没有被触发
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$('.nav-tabs a').click(function (e) {
// No e.preventDefault() here.
$(this).tab('show');
});
</script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/js/bootstrap.min.js"></script>