[英]Bootstrap 3 nav-tabs won't change on click
因此,我刚刚在Bootstrap中启动了一个新站点,并且正在研究nav-tabs设计。 我按照发球区域的指示进行操作,在这一点上几乎已经复制并粘贴了,只是为了使其起作用,但是but,我遇到了几个问题:
(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脚本下面,但是就像我说的,我所做的任何事情都没有产生任何变化。 其他所有内容在页面上看起来都不错,但是这里的一些指导确实可以使我从右脚开始。 我使用引导程序已经有几个小时了,所以请原谅我的无知。 文档说,使用数据切换时,引导程序甚至不需要JavaScript来切换选项卡,因此我对正确答案的理解非常困惑。
:EDIT:第一个答案是正确的。 将标签直接放在结束body标签之前并不能改善功能,但可以用替换我的脚本
<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文件在正确的位置,但似乎它们在某些方面没有完全起作用/损坏。 再次感谢!
顺便说一句:我是否能够不断链接到这些存储库,或者当引导程序/ jquery的新更新发布时我是否必须更新页面? 我要问的是这些存储库将被删除吗?
这些选项卡工作正常,如下所示: https : //jsfiddle.net/AndrewL32/nh6ma48r/
<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>
您需要保留bootstrap.js以及上面的脚本,该脚本在<head></head>
部分的上方但在jQuery的下方调用该函数。
另外,请更换您的:
<script src="bootstrap.js"></script>
与此<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
和你的
<script src="jQuery"></script>
与此<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
(问题可能是因为您的js文件已被编辑,移动或丢失)
我唯一能想到的(但是通常会导致此问题的原因)是您的<link>
和<script>
标记位置错误。 将您的代码复制到我的编辑器中,并在</body>
标记之前添加jquery.min.js
和bootstrap.min.js
使其对我来说很好用。 这是HTML文件:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href=".../bootstrap.min.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=".../jquery.min.js" type="text/javascript"></script>
<script src=".../bootstrap.min.js" type="text/javascript"></script>
</body>
</html>
注意:将.../
替换为bootstrap.min.css
, jquery.min.js
和bootstrap.min.js
的正确URL。 希望有帮助!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.