外部链接到Tab，Tab不更改，引导3.3.5
外部链接到Tab，Tab不更改，引导3.3.5
提问于 2016-06-16 19:11:00
我的问题与这些问题非常相似，在这些问题中，我试图使用一个链接来更改选项卡，但链接只更改选项卡内容，而不是活动选项卡。
最相似的：Bootstrap linking to a tab with an url
非常相似：show tab with external link with onclick in bootstrap 3
然而，我目前没有发现这些解决方案的成功，可能是因为我有一个不同版本的引导(或者可能是因为我只是在做一些愚蠢的事情:p，我们会看到的)
这是我的密码
<!doctype html>
<html lang=''>
<head>
<meta charset='utf-8'>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="script2.js"></script>
<!-- For Dynamic Tabs-->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<!--Begin Page Code-->
<ul class="nav nav-tabs" style="font-size: 20px">
<li class="active"><a data-toggle="tab" href="#tab1">Tab1</a></li>
<li><a data-toggle="tab" href="#tab2">Tab2</a></li>
<li><a data-toggle="tab" href="#tab3">Tab3</a></li>
<li><a data-toggle="tab" href="#tab4">Tab4</a></li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab-pane fade in active" >
<a href="#tab2" data-toggle="tab">Link to 2</a><br>
<a href="#tab3" data-toggle="tab">Link to 3</a><br>
<a href="#tab3" data-toggle="tab">Another Link to 3</a>
</div>
<div id="tab2" class="tab-pane fade">
<p> This is tab 2 </p>
</div>
<div id="tab3" class="tab-pane fade">
<p> This is tab 3 </p>
</div>
<div id="tab4" class="tab-pane fade">
<p> This is tab 4 </p>
</div>
</div>
<!--End Page Code-->
</body>
<html>而script2.js正是我尝试实现解决方案的地方。目前这个是来自Bootstrap linking to a tab with an url的
$(function () {
$('#tab1 a').click(function (e) {
e.preventDefault();
$('a[href="' + $(this).attr('href') + '"]').tab('show');
})
});有人知道怎么帮忙吗？
回答 3
Stack Overflow用户
回答已采纳
发布于 2016-06-16 19:17:48
在导入jQuery和引导javascript文件之前，您将包括脚本文件。
由于您的代码需要这两个库，所以需要将script2.js移动到其他脚本下面：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="script2.js"></script>您的浏览器javascript控制台将包含如下内容的消息：
未定义$。
这应该永远是你第一个看的地方。
您的代码在正确使用时运行良好：http://www.bootply.com/zP1y6wJIl1
Stack Overflow用户
发布于 2016-06-16 19:18:33
您可以使用window.location.href获得类似于http://domain.com/index.html#tab1的信息。
(没有测试)但你可以把：
if (window.location.href.replace("#", "") == "tab1")
{
//change tab
}Stack Overflow用户
发布于 2016-06-16 19:19:38
您很多人都希望将链接更改为：
<a href="javascript:$('a[href=#tab2]').click()" >Link to 2</a><br>
<a href="javascript:$('a[href=#tab3]').click()">Link to 3</a><br>
<a href="javascript:$('a[href=#tab4]').click()">Another Link to 3</a>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/37867556
复制相关文章
相似问题
腾讯云开发者
