Twitter Bootstrap-选项卡-URL不变
问题描述:
我正在使用Twitter Bootstrap及其选项卡".
I'm using Twitter Bootstrap and its "tabs".
我有以下代码:
<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>
标签正常工作,但未在URL中添加#add,#edit,#delete.
The tabs work properly, but the in the URL is not added the #add, #edit, #delete.
当我删除data-toggle
时,URL会更改,但是选项卡不起作用.
When I remove data-toggle
the URL changes, but the tabs don't work.
有什么解决办法吗?
答
尝试此代码.它将标签href添加到url,然后根据页面加载时的哈希值打开标签:
Try this code. It adds tab href to url + opens tab based on hash on page load:
$(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);
});
});