Jquery 从外部URL启动加载选项卡_Jquery_Twitter Bootstrap_Tabs_External

Jquery 从外部URL启动加载选项卡

jquery twitter-bootstrap tabs

Jquery 从外部URL启动加载选项卡,jquery,twitter-bootstrap,tabs,external,Jquery,Twitter Bootstrap,Tabs,External,我已经看过关于如何从外部URL加载特定引导选项卡的各种页面，例如，我已经尝试过实现，但我就是无法让它工作。包括我在这里使用的代码的基础-选项卡工作正常，但我无法从外部URL加载它们 <!DOCTYPE html> <head> <meta charset="utf-8"> <title>PAGE TITLE</title> <meta name="description" content=""> <meta name=

我已经看过关于如何从外部URL加载特定引导选项卡的各种页面，例如，我已经尝试过实现，但我就是无法让它工作。包括我在这里使用的代码的基础-选项卡工作正常，但我无法从外部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>


页面标题
$（“#myTab a”）。单击（函数（e）{
e、 预防默认值（）；
var pattern=/#.+/gi//使用正则表达式获取锚点（=选择器）
var contentID=e.target.toString（）.match（pattern）[0]；//获取锚点
$（'.nav tabs a[href=“'+contentID+''“]”）选项卡（'show'）；
});






加价
代码在这里。。。
窗格2内容
等等
窗格3内容
窗格4内容

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

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

@MattS的可能重复我认为该链接指的是将内容动态加载到选项卡？中，而我的内容是静态的，我所要做的就是通过外部URL加载特定的选项卡，就像使用html锚定位到页面的特定部分一样。它类似于：，只是我无法使我发现的任何代码正常工作，所以我想有人可以查看代码并希望告诉我哪里出了问题：）从“外部”URL加载是用AJAX完成的，不管HTML是如何生成的。

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