来自外部URL的Bootstrap加载选项卡 [英] Bootstrap load tab from external URL
问题描述
我浏览了各种页面，了解如何从外部URL加载特定的引导程序标签，例如 http://pagename.html#tab1 ，我已经尝试实现，但是我无法使其正常工作.包括我在此处使用的代码的基础-选项卡可以正常工作，但是我无法从外部URL加载它们
I have looked at various pages on how to load a specific bootstrap tab from an external URL e.g. http://pagename.html#tab1 and I have tried to implement, but I just cannot get it to work. Including the base of the code I am using here - the tabs work fine, but I cannot get them to load from an external URL
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>PAGE TITLE</title>
<meta name="description" content="">
<meta name="author" content="">
<link href="../css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="../js/bootstrap.min.js"></script>
<script>
$('#myTab a').click(function (e) {
e.preventDefault();
var pattern=/#.+/gi //use regex to get anchor(==selector)
var contentID = e.target.toString().match(pattern)[0]; //get anchor
$('.nav-tabs a[href="'+contentID+'"]').tab('show') ;
});
</script>
</head>
<body>
<div class="container">
<a href="#pane1">PANE1</a>
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active"><a href="#pane1" data-toggle="tab">Tab 1</a></li>
<li><a href="#pane2" data-toggle="tab">Tab 2</a></li>
<li><a href="#pane3" data-toggle="tab">Tab 3</a></li>
<li><a href="#pane4" data-toggle="tab">Tab 4</a></li>
</ul>
<div class="tab-content">
<div id="pane1" class="tab-pane active">
<h4>The Markup</h4>
<pre>Code here ...</pre>
</div>
<div id="pane2" class="tab-pane">
<h4>Pane 2 Content</h4>
<p> and so on ...</p>
</div>
<div id="pane3" class="tab-pane">
<h4>Pane 3 Content</h4>
</div>
<div id="pane4" class="tab-pane">
<h4>Pane 4 Content</h4>
</div>
</div><!-- /.tab-content -->
</div><!-- /.tabbable -->
</div>
</body>
</html>
推荐答案
刚刚找到了答案-这真的很容易并且有效！只需在脑海中使用此脚本即可:
Just found the answer - it's really easy and it works! Just use this script inside the head:
$(function () {
var activeTab = $('[href=' + location.hash + ']');
activeTab && activeTab.tab('show');
});
显然，它只是检查URL中的哈希并将其设置为活动选项卡.经过测试，可以正常工作！
Apparently it just checks for the hash in the URL and sets it to the active tab. Tested and it works!
这篇关于来自外部URL的Bootstrap加载选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
