我正在开发一个网页,其中我使用Twitter的引导框架和他们的引导标签JS。它的工作很好,除了一些小问题,其中之一是我不知道如何直接从外部链接到一个特定的选项卡。例如:
<a href="facility.php#home">Home</a>
<a href="facility.php#notes">Notes</a>
当从外部页面点击链接时,应该分别转到Home选项卡和Notes选项卡
我正在开发一个网页,其中我使用Twitter的引导框架和他们的引导标签JS。它的工作很好,除了一些小问题,其中之一是我不知道如何直接从外部链接到一个特定的选项卡。例如:
<a href="facility.php#home">Home</a>
<a href="facility.php#notes">Notes</a>
当从外部页面点击链接时,应该分别转到Home选项卡和Notes选项卡
当前回答
只需在页面上插入以下代码:
$(function(){ var hash = window.location.hash; hash && $('ul.nav a[href=“' + hash + '”]').tab('show'); $('.nav-tabs a').click(function (e) { $(this).tab('show'); var scrollm = $('body').scrollTop(); window.location.hash = this.hash; $('html,body').scrollTop(scrollm); }); });
其他回答
我建议你使用Bootstrap作者在GitHub上的问题跟踪器上提供的代码:
var hash = location.hash
, hashPieces = hash.split('?')
, activeTab = $('[href=' + hashPieces[0] + ']');
activeTab && activeTab.tab('show');
你可以在这个问题的链接上找到更多关于他们为什么不选择支持它的信息。
下面是我所做的,非常简单,并且提供你的标签链接有一个与它们相关的ID,你可以获得href属性,并将其传递给显示标签内容的函数:
<script type="text/javascript">
jQuery(document).ready(function() {
var hash = document.location.hash;
var prefix = "tab_";
if (hash) {
var tab = jQuery(hash.replace(prefix,"")).attr('href');
jQuery('.nav-tabs a[href='+tab+']').tab('show');
}
});
</script>
然后在你的url中,你可以像这样添加散列:#tab_tab1, 'tab_'部分从散列本身中删除,因此在nav-tabs (tabid1)中实际的标签链接的ID被放在后面,所以你的url看起来像:www.mydomain.com/index.php#tab_tabid1。
这对我来说是完美的,希望它能帮助其他人:-)
你可以在相应的TAB链接上触发一个点击事件:
$(document).ready(function(){
if(window.location.hash != "") {
$('a[href="' + window.location.hash + '"]').click()
}
});
我提出了一个解决方案,使用url哈希或localStorage取决于后者的可用性,代码如下:
$(function(){
$(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function (e) {
localStorage.setItem('activeTab', $(e.target).attr('href'));
})
var hash = window.location.hash;
var activeTab = localStorage.getItem('activeTab');
if(hash){
$('#project-tabs a[href="' + hash + '"]').tab('show');
}else if (activeTab){
$('#project-tabs a[href="' + activeTab + '"]').tab('show');
}
});
这是我处理嵌套选项卡的解决方案。 我只是添加了一个函数来检查活动选项卡是否有一个要激活的父选项卡。 这是函数:
function activateParentTab(tab) {
$('.tab-pane').each(function() {
var cur_tab = $(this);
if ( $(this).find('#' + tab).length > 0 ) {
$('.nav-tabs a[href=#'+ cur_tab.attr('id') +']').tab('show');
return false;
}
});
}
并且可以像这样调用(基于@flynfish的解决方案):
var hash = document.location.hash;
var prefix = "";
if (hash) {
$('.nav-tabs a[href='+hash.replace(prefix,"")+']').tab('show');
activateParentTab(hash);
}
// Change hash for page-reload
$('.nav-tabs a').on('shown', function (e) {
window.location.hash = e.target.hash.replace("#", "#" + prefix);
});
目前这个解决方案对我来说很好。 希望这能对其他人有用;)