从外部 URL 引导加载选项卡答案

【问题标题】：Bootstrap load tab from external URL从外部 URL 引导加载选项卡
【发布时间】：2014-08-15 19:42:59
【问题描述】：

我查看了有关如何从外部 URL 加载特定引导选项卡的各个页面，例如http://pagename.html#tab1 我已经尝试实现，但我就是无法让它工作。包括我在这里使用的代码的基础 - 选项卡工作正常，但我无法让它们从外部 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>

【问题讨论】：

How to use ajax loading with bootstrap-tabs.js?的可能重复
@MattS 我认为该链接是指将内容动态加载到选项卡中？虽然我的内容是静态的，但我想要做的就是通过外部 URL 加载特定选项卡，例如拥有一个 html 锚转到页面的特定部分。它类似于：stackoverflow.com/questions/19814481/…，除了我无法使我找到的任何代码工作，所以我认为有人可以查看代码并希望告诉我哪里出错了:)
使用 AJAX 从“外部”URL 加载，无论 HTML 是如何生成的。

标签： jquery twitter-bootstrap tabs external

【解决方案1】：

刚刚找到答案 - 它真的很简单而且很有效！只需在头部使用这个脚本：

$(function () {
var activeTab = $('[href=' + location.hash + ']');
activeTab && activeTab.tab('show');
});

显然它只是检查 URL 中的哈希并将其设置为活动选项卡。经过测试，它可以工作！

【讨论】：