我正在开发一个网页,其中我使用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选项卡
当前回答
尝试了上面讨论的几种方法,最终得到了以下工作解决方案,只需在编辑器中复制并粘贴即可。要测试,只需更改哈希到收件箱,发件箱,撰写在url和按enter键。
<html>
<head>
<link type='text/css' rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css' />
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container body-content">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#inbox">Inbox</a></li>
<li><a data-toggle="tab" href="#outbox">Outbox</a></li>
<li><a data-toggle="tab" href="#compose">Compose</a></li>
</ul>
<div class="tab-content">
<div id="inbox" class="tab-pane fade in active">
Inbox Content
</div>
<div id="outbox" class="tab-pane fade">
Outbox Content
</div>
<div id="compose" class="tab-pane fade">
Compose Content
</div>
</div>
</div>
<script>
$(function () {
var hash = window.location.hash;
hash && $('ul.nav a[href="' + hash + '"]').tab('show');
});
</script>
</body>
</html>
希望这能节省你的时间。
其他回答
对于引导3:
$('.nav-tabs a[href="#' + tabID + '"]').tab('show');
https://jsfiddle.net/DTcHh/6638/
结合其他答案,这里有一个解决方案,可以打开许多级别的嵌套选项卡:
// opens all tabs down to the specified tab
var hash = location.hash.split('?')[0];
if(hash) {
var $link = $('[href=' + hash + ']');
var parents = $link.parents('.tab-pane').get();
$(parents.reverse()).each(function() {
$('[href=#' + this.id + ']').tab('show') ;
});
$link.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。
这对我来说是完美的,希望它能帮助其他人:-)
我不太喜欢“如果……否则”;所以我采取了更简单的方法。
$(document).ready(function(event) {
$('ul.nav.nav-tabs a:first').tab('show'); // Select first tab
$('ul.nav.nav-tabs a[href="'+ window.location.hash+ '"]').tab('show'); // Select tab by name if provided in location hash
$('ul.nav.nav-tabs a[data-toggle="tab"]').on('shown', function (event) { // Update the location hash to current tab
window.location.hash= event.target.hash;
})
});
选择一个默认选项卡(通常是第一个) 切换到tab(如果确实存在这样的元素;让jQuery来处理它);如果指定了错误的散列,则什么也不会发生 [可选]如果手动选择了其他选项卡,则更新哈希
不处理滚动到所请求的散列;但这应该吗?
只需在页面上插入以下代码:
$(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); }); });