Javascript 引导3个导航标签赢得';不要一点击就改变
所以我刚刚在bootstrap中创建了一个新站点,我正在设计导航标签。我已经按照T形三通的说明进行了复制和粘贴,现在只是为了让它正常工作,但我有几个问题: (1) 导航选项卡不会在单击时更改,即url更改为“我的元素id”,但实际选项卡不会变为“活动”(主页保持按下状态,而其他选项卡保持未按下状态) (2) 选项卡content div仅显示class=“active”标记的内容 我已经包含了必要的jquery和bootstrap js脚本,我相信它们的顺序是正确的,但无论我做什么,这些选项卡都不会将其活动状态切换到单击的状态 这是我的html:Javascript 引导3个导航标签赢得';不要一点击就改变,javascript,jquery,html,css,twitter-bootstrap,Javascript,Jquery,Html,Css,Twitter Bootstrap,所以我刚刚在bootstrap中创建了一个新站点,我正在设计导航标签。我已经按照T形三通的说明进行了复制和粘贴,现在只是为了让它正常工作,但我有几个问题: (1) 导航选项卡不会在单击时更改,即url更改为“我的元素id”,但实际选项卡不会变为“活动”(主页保持按下状态,而其他选项卡保持未按下状态) (2) 选项卡content div仅显示class=“active”标记的内容 我已经包含了必要的jquery和bootstrap js脚本,我相信它们的顺序是正确的,但无论我做什么,这些选项卡都
<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>
新网页w/Bootstrap
医院数据解决方案
财务分析数据库
关于我们
全国成本报告和财务分析数据库
年度认购
购买年度订阅以访问所有成本报告
个人成本报告
以.pdf、.xs、.csv格式直接从我们处购买个人成本报告
搜索我们的数据库
搜索内容在这里
注销
在这里注销
我尝试了我能找到的各种解决方案,包括添加
<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>
$(文档).ready(函数(){
$(“#myTab a”)。单击(函数(e){
e、 预防默认值()
$(this.tab('show'))
})
$('a[data toggle=“tab”]”)on('show.bs.tab',函数(e){
e、 relatedTarget//previous选项卡
});
});
在bootstrap.min.js脚本下面,但正如我所说,我所做的任何事情都没有产生任何变化。页面上的其他内容看起来都很好,但这里的一点指导确实会让我从正确的方向开始。我已经有几个小时没有使用bootstrap了,请原谅我的无知。文档中说,当使用数据切换时,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>
$(文档).ready(函数(){
$(“#myTab a”)。单击(函数(e){
e、 预防默认值()
$(this.tab('show'))
})
$('a[data toggle=“tab”]”)on('show.bs.tab',函数(e){
e、 relatedTarget//previous选项卡
});
});
确实有效。我发现我最初的jquery和引导文件放在了正确的位置,但似乎它们在某种程度上并没有完全发挥作用。再次感谢
顺便问一下:我是否能够经常链接到这些存储库,或者当bootstrap/jquery的新更新出现时,我是否必须更新我的页面?我想问的是这些存储库是否会被删除?从这里可以看到,这些选项卡工作正常:
$(文档).ready(函数(){
$(“#myTab a”)。单击(函数(e){
e、 预防默认值()
$(this.tab('show'))
})
$('a[data toggle=“tab”]”)on('show.bs.tab',函数(e){
e、 relatedTarget//previous选项卡
});
});
您需要保留bootstrap.js以及上面的脚本,该脚本在
部分调用上面的函数,但在jQuery下面
此外,请更换您的:
使用此
还有你的
使用此
(问题可能是因为您的js文件被编辑、移动或丢失)我能想到的唯一一件事(但通常会导致此问题)是您的
和
标记位于错误的位置。将您的代码复制到我的编辑器中,并在关闭
标记之前添加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>
新网页w/Bootstrap
医院数据解决方案
财务分析数据库
关于我们
全国成本报告和财务分析数据库
年度认购
购买年度订阅以访问所有成本报告
个人成本报告
以.pdf、.xs、.csv格式直接从我们处购买个人成本报告
搜索我们的数据库
搜索内容在这里
注销
在这里注销
<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>