【发布时间】：2015-05-12 11:02:34
【问题描述】：
所以我刚刚在 bootstrap 中创建了一个新站点，并且正在研究导航标签设计。我已经按照 T 恤的说明进行操作，此时几乎已经复制并粘贴了它，只是为了让它发挥作用，但是我有几个问题：
(1) 导航选项卡在单击时不会更改，即 url 更改为我的元素 ID，但实际选项卡没有变为“活动”（主页保持按下状态，而其他选项保持未按下状态）
(2) tab-content div 只显示标记为 class="active" 的内容。
我已经包含了必要的 jquery 和 bootstrap js 脚本，我相信它们的顺序是正确的，但无论我做什么，这些选项卡都不会将它们的活动状态切换到被点击的状态。
这是我的html：
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="js/jquery-1.11.2.min" type="text/javascript"></script>
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<link href="css/main.css" rel="stylesheet" type="text/css" />
<title>New Homepage w/ Bootstrap</title>
</head>
<body>
<div class="nav">
<div class="container">
<div class="tabbable">
<ul class="nav nav-tabs" data-tabs="tabs" id="myTab">
<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
<li><a data-toggle="tab" href="#about">About</a></li>
<li><a data-toggle="tab" href="#subscribe">Subscribe</a></li>
<li><a data-toggle="tab" href="#search">Search</a></li>
<li><a data-toggle="tab" href="#logout">Logout</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">
<h1>Hospital Data Solutions</h1>
<p>Financial Analysis Database</p>
</div>
<div class="tab-pane" id="about">
<h1>About Us</h1>
<p>Cost Reports and Financial Analysis Nationwide Database</p>
</div>
<div class="tab-pane" id="subscribe">
<h1>Annual Subscription</h1>
<p>Purchase an annual subscription to access all cost reports.</p>
<h2>Individual Cost Reports</h2>
<p>Purchase individual cost reports directly from us in .pdf, .xs, .csv formats.</p>
</div>
<div class="tab-pane" id="search">
<h1>Search our database</h1>
<p>Search content goes here.</p>
</div>
<div class="tab-pane" id="logout">
<h1>logout</h1>
<p>Logout fx goes here.</p>
</div>
</div>
</div>
</div>
</div>
<script src="js/bootstrap.js"></script>
</body>
</html>
我尝试了各种我能找到的解决方案，包括添加
<script>
$(document).ready(function () {
$('#myTab a').click(function (e) {
e.preventDefault()
$(this).tab('show')
})
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
e.relatedTarget // previous tab
});
});
</script>
在 bootstrap.min.js 脚本下面，但就像我所说的，我所做的任何事情都没有产生任何变化。页面上的其他所有内容看起来都很好，但这里的一些指导真的会让我从正确的角度开始。我已经有几个小时没有使用引导程序了，所以请原谅我的无知。文档说，当使用 data-toggle 时，bootstrap 甚至不需要 javascript 来切换选项卡，所以我很困惑正确的答案是什么。
：编辑：第一个答案是正确的。将标签放在结束正文标签之前并没有改善功能，而是用
替换我的脚本<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#myTab a').click(function (e) {
e.preventDefault()
$(this).tab('show')
})
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
e.relatedTarget // previous tab
});
});
</script>
确实有效。我最初的 jquery 和 bootstrap 文件位于正确的位置，但似乎它们在某些方面并没有完全正常运行/损坏。再次感谢！
顺便说一句：我是否能够经常链接到这些存储库，或者当 bootstrap/jquery 的新更新出现时我是否必须更新我的页面？我要问的是这些存储库会被删除吗？
【问题讨论】：
-
你能提供一个关于你在 Habitat 所做的事情的 jsfiddle
-
你确定吗？对我来说似乎工作正常：bootply.com/3nzwSSfJ8v 即使没有你的 Javascript：bootply.com/wZAR5IWlfU
标签： javascript jquery html css twitter-bootstrap