外部链接到选项卡，选项卡不变，Bootstrap 3.3.5 [英] Externally Linking to a Tab, Tab not changing, Bootstrap 3.3.5
问题描述
我的问题与这些问题非常相似，我尝试使用链接更改选项卡，但该链接仅更改选项卡内容，而不更改活动选项卡.
My issue is very similar to these questions, where I am trying to use a link to change tabs, but the link only changes the tab content, but not the active tab.
最相似:引导链接到带有 url 的选项卡
非常相似:显示标签在引导程序 3 中带有带有 onclick 的外部链接
但是我目前在这两种解决方案中都没有成功，可能是因为我有不同版本的引导程序(或者可能是因为我只是在做一些愚蠢的事情:p 我们会看到)
However I am currently not finding success with either of these solutions, perhaps because I have a different version of bootstrap (or maybe because I'm just doing something dumb :p we'll see)
这是我的代码
<!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 是我尝试实施解决方案的地方.目前这个来自 引导链接到带有 url 的标签
Where script2.js is where I am trying to implement solutions. Currently this one from Bootstrap linking to a tab with an url
$(function () {
$('#tab1 a').click(function (e) {
e.preventDefault();
$('a[href="' + $(this).attr('href') + '"]').tab('show');
})
});
有人知道怎么帮忙吗?
推荐答案
在导入 jQuery 和引导 javascript 文件之前，您将包含脚本文件.
You are including your script file before you import jQuery and the bootstrap javascript files.
由于您的代码需要这两个库，因此您需要将 script2.js 移动到其他脚本下方:
Since your code requires both of these libraries, you need to move your script2.js underneath your other scripts:
<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 控制台将包含如下消息:
Your browsers javascript console will contain a message along the lines of:
$ 未定义.
这应该永远是你最先看到的地方.
this should always be the first place you look.
正确使用您的代码可以正常工作:http://www.bootply.com/zP1y6wJIl1
Your code works fine when used correctly: http://www.bootply.com/zP1y6wJIl1
这篇关于外部链接到选项卡，选项卡不变，Bootstrap 3.3.5的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
