Html Twitter Bootstrap 标签不起作用：当我点击它们时什么也没有发生
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9630595/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Twitter Bootstrap tabs not working: when I click on them nothing happens
提问by DEREK N
I am trying to implement Twitter Bootstrap tabs in the following code, but it does not seem to work. The tabs get displayed, but when I click on them nothing happens. Below is the only code I am using. All the other CSS/JS scripts are copied from Twitter Bootstrap framework.
我正在尝试在以下代码中实现 Twitter Bootstrap 选项卡，但它似乎不起作用。选项卡会显示出来，但是当我点击它们时什么也没有发生。下面是我使用的唯一代码。所有其他 CSS/JS 脚本都是从 Twitter Bootstrap 框架复制的。
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Le styles -->
<link href="assets/twitterbootstrap/css/bootstrap.css" rel="stylesheet">
<link href="assets/twitterbootstrap/css/bootstrap-responsive.css" rel="stylesheet">
</head>
<body data-spy="scroll" data-target=".subnav" data-offset="50">
<div class="container">
<!-------->
<div id="content">
<ul class="nav nav-tabs" data-tabs="tabs">
<li class="active"><a href="#red">Red</a></li>
<li><a href="#orange">Orange</a></li>
<li><a href="#yellow">Yellow</a></li>
<li><a href="#green">Green</a></li>
<li><a href="#blue">Blue</a></li>
</ul>
<div id="my-tab-content" class="tab-content">
<div class="tab-pane active" id="red">
<h1>Red</h1>
<p>red red red red red red</p>
</div>
<div class="tab-pane" id="orange">
<h1>Orange</h1>
<p>orange orange orange orange orange</p>
</div>
<div class="tab-pane" id="yellow">
<h1>Yellow</h1>
<p>yellow yellow yellow yellow yellow</p>
</div>
<div class="tab-pane" id="green">
<h1>Green</h1>
<p>green green green green green</p>
</div>
<div class="tab-pane" id="blue">
<h1>Blue</h1>
<p>blue blue blue blue blue</p>
</div>
</div>
</div>
<script type="text/javascript">
jQuery(document).ready(function ($) {
$(".tabs").tabs();
});
</script>
</div> <!-- container -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.js"></script>
<script type="text/javascript" src="assets/twitterbootstrap/js/bootstrap.js"></script>
</body>
</html>
回答by BartekR
You need to add tabs plugin to your code
您需要在代码中添加标签插件
<script type="text/javascript" src="assets/twitterbootstrap/js/bootstrap-tab.js"></script>
Well, it didn't work. I made some tests and it started working when:
好吧，它没有用。我做了一些测试，它在以下情况下开始工作：
- moved (updated to 1.7) jQuery script to
<head>section - added
data-toggle="tab"to links and id for<ul>tab element - changed
$(".tabs").tabs();to$("#tabs").tab(); - and some other things that shouldn't matter
- 移动（更新到 1.7）jQuery 脚本到
<head>部分 - 添加
data-toggle="tab"到<ul>选项卡元素的链接和 id - 改变
$(".tabs").tabs();以$("#tabs").tab(); - 以及其他一些无关紧要的事情
Here's a code
这是一个代码
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Le styles -->
<link href="../bootstrap/css/bootstrap.css" rel="stylesheet">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
</head>
<body>
<div class="container">
<!-------->
<div id="content">
<ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
<li class="active"><a href="#red" data-toggle="tab">Red</a></li>
<li><a href="#orange" data-toggle="tab">Orange</a></li>
<li><a href="#yellow" data-toggle="tab">Yellow</a></li>
<li><a href="#green" data-toggle="tab">Green</a></li>
<li><a href="#blue" data-toggle="tab">Blue</a></li>
</ul>
<div id="my-tab-content" class="tab-content">
<div class="tab-pane active" id="red">
<h1>Red</h1>
<p>red red red red red red</p>
</div>
<div class="tab-pane" id="orange">
<h1>Orange</h1>
<p>orange orange orange orange orange</p>
</div>
<div class="tab-pane" id="yellow">
<h1>Yellow</h1>
<p>yellow yellow yellow yellow yellow</p>
</div>
<div class="tab-pane" id="green">
<h1>Green</h1>
<p>green green green green green</p>
</div>
<div class="tab-pane" id="blue">
<h1>Blue</h1>
<p>blue blue blue blue blue</p>
</div>
</div>
</div>
<script type="text/javascript">
jQuery(document).ready(function ($) {
$('#tabs').tab();
});
</script>
</div> <!-- container -->
<script type="text/javascript" src="../bootstrap/js/bootstrap.js"></script>
</body>
</html>
回答by Hymany
The key elements include:
关键要素包括：
- the
class="nav nav-tabs"anddata-tabs="tabs"oful - the
data-toggle="tab"andhref="#orange"of thea - the
class="tab-content"of thedivof the content - the
class="tab-pane"andidof the div of the items
- 该
class="nav nav-tabs"和data-tabs="tabs"的ul - 该
data-toggle="tab"和href="#orange"的a - 的
class="tab-content"的div内容 - 在
class="tab-pane"与id该项目的div
The complete code is as below:
完整的代码如下：
<ul class="nav nav-tabs" data-tabs="tabs">
<li class="active"><a data-toggle="tab" href="#red">Red</a></li>
<li><a data-toggle="tab" href="#orange">Orange</a></li>
<li><a data-toggle="tab" href="#yellow">Yellow</a></li>
<li><a data-toggle="tab" href="#green">Green</a></li>
<li><a data-toggle="tab" href="#blue">Blue</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="red">
<h1>Red</h1>
<p>red red red red red red</p>
</div>
<div class="tab-pane" id="orange">
<h1>Orange</h1>
<p>orange orange orange orange orange</p>
</div>
<div class="tab-pane" id="yellow">
<h1>Yellow</h1>
<p>yellow yellow yellow yellow yellow</p>
</div>
<div class="tab-pane" id="green">
<h1>Green</h1>
<p>green green green green green</p>
</div>
<div class="tab-pane" id="blue">
<h1>Blue</h1>
<p>blue blue blue blue blue</p>
</div>
</div>
回答by IdaS
Had a problem with Bootstrap tabs recently following their online guidelines, but there's currently an error in their markup example data-tabs="tabs" is missing on <ul>element. Without it using data-toggleon links doesn't work.
最近按照他们的在线指南使用 Bootstrap 选项卡有问题，但目前在他们的标记示例中存在一个错误data-tabs="tabs“<ul>元素缺失。没有它data-toggle在链接上使用是行不通的。
回答by kewang
I have the same problem, but above some answers might be tricky for me.
我有同样的问题，但上面的一些答案对我来说可能很棘手。
I found the other answer maybe solve your question Twitter Bootstrap Js (tabs, popups, dropdown) not working in Drupal
我发现另一个答案可能会解决您的问题Twitter Bootstrap Js（选项卡、弹出窗口、下拉列表）在 Drupal 中不起作用
place
jquery.jsbeforebootstrap.tab.js
放在
jquery.js之前bootstrap.tab.js
回答by Andres Ilich
You're missing the data-toggle="tab"data-tag on your menu urls so your scripts can't tell where your tab switches are:
您data-toggle="tab"的菜单 url 上缺少数据标签，因此您的脚本无法判断选项卡开关的位置：
HTML
HTML
<ul class="nav nav-tabs" data-tabs="tabs">
<li class="active"><a data-toggle="tab" href="#red">Red</a></li>
<li><a data-toggle="tab" href="#orange">Orange</a></li>
<li><a data-toggle="tab" href="#yellow">Yellow</a></li>
<li><a data-toggle="tab" href="#green">Green</a></li>
<li><a data-toggle="tab" href="#blue">Blue</a></li>
</ul>
回答by user1203530
I just fixed this issue by adding data-toggle="tab"element in anchor tag
我只是通过在锚标记中添加data-toggle="tab"元素来解决这个问题
<div class="container">
<!-------->
<div id="content">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#red">Red</a></li>
<li><a data-toggle="tab" href="#orange">Orange</a></li>
<li><a data-toggle="tab" href="#yellow">Yellow</a></li>
<li><a data-toggle="tab" href="#green">Green</a></li>
<li><a data-toggle="tab" href="#blue">Blue</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="red">
<h1>Red</h1>
<p>red red red red red red</p>
</div>
<div class="tab-pane" id="orange">
<h1>Orange</h1>
<p>orange orange orange orange orange</p>
</div>
<div class="tab-pane" id="yellow">
<h1>Yellow</h1>
<p>yellow yellow yellow yellow yellow</p>
</div>
<div class="tab-pane" id="green">
<h1>Green</h1>
<p>green green green green green</p>
</div>
<div class="tab-pane" id="blue">
<h1>Blue</h1>
<p>blue blue blue blue blue</p>
and added the following in head section http://code.jquery.com/jquery-1.7.1.js'>
并在头部部分添加以下内容 http://code.jquery.com/jquery-1.7.1.js'>
回答by user2595775
I tried the codes from bootstrap's document as follows:
我尝试了 bootstrap 文档中的代码，如下所示：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>tab demo</title>
<link rel="stylesheet" href="bootstrap.css">
</head>
<body>
<div class="span9">
<div class="tabbable"> <!-- Only required for left/right tabs -->
<ul class="nav nav-tabs">
<li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
<li><a href="#tab2" data-toggle="tab">Section 2</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p>I'm in Section 1.</p>
</div>
<div class="tab-pane" id="tab2">
<p>Howdy, I'm in Section 2.</p>
</div>
</div>
</div>
</div>
<script src="jquery.min.js"></script>
<script src="bootstrap.js"></script>
</body>
</html>
and it works.
But when I switch these two <script src...>'s postion, it do not work. So please remember to load your jquery script before bootstrap.js.
它有效。但是当我切换这两个<script src...>的位置时，它不起作用。所以请记得在 bootstrap.js 之前加载你的 jquery 脚本。
回答by Joe Geek
Actually, there is another easy way to do it. It works for me but I'm not sure for you guys. The key thing here, is just adding the FADE in each (tab-pane) and it will works. Besides, you don't even need to script function or whatever version of jQuery. Here is my code...hope it will works for you all.
实际上，还有另一种简单的方法可以做到。它对我有用，但我不确定你们。这里的关键是，只需在每个（选项卡窗格）中添加 FADE，它就会起作用。此外，您甚至不需要编写函数或任何版本的 jQuery。这是我的代码......希望它对你们有用。
<div class="tab-pane fade" id="Customer">
<table class="table table-hover table-bordered">
<tr>
<th width="40%">Contact Person</th>
<td><?php echo $event['Event']['e_contact_person']; ?></td>
</tr>
</table>
</div>
<div class="tab-pane fade" id="Delivery">
<table class="table table-hover table-bordered">
<tr>
<th width="40%">Time Arrive Warehouse Start</th>
<td><?php echo $event['Event']['e_time_arrive_WH_start']; ?></td>
</tr>
</table>
</div>
回答by Brock Hensley
This solved it when none of the other examples did:
当其他示例都没有时，这解决了它：
$('#myTab a').click(function (e) {
e.preventDefault();
$(this).tab('show');
});
回答by Brock Hensley
i had the same problem until i downloaded bootstrap-tab.js and included it in my script, download from here https://code.google.com/p/fusionleaf/source/browse/webroot/fusionleaf/com/www/inc/bootstrap/js/bootstrap-tab.js?r=82aacd63ee1f7f9a15ead3574fe2c3f45b5c1027
我遇到了同样的问题，直到我下载了 bootstrap-tab.js 并将其包含在我的脚本中，从这里下载https://code.google.com/p/fusionleaf/source/browse/webroot/fusionleaf/com/www/inc /bootstrap/js/bootstrap-tab.js?r=82aacd63ee1f7f9a15ead3574fe2c3f45b5c1027
include the bootsrap-tab.js in the just below the jquery
在 jquery 正下方包含 bootsrap-tab.js
<script type="text/javascript" src="bootstrap/js/bootstrap-tab.js"></script>
Final Code Looked like this:
最终代码如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<link href="bootstrap/css/bootstrap.css" rel="stylesheet">
<script type="text/javascript" src="libraries/jquery.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap-tab.js"></script>
</head>
<body>
<div class="container">
<!-------->
<div id="content">
<ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
<li class="active"><a href="#red" data-toggle="tab">Red</a></li>
<li><a href="#orange" data-toggle="tab">Orange</a></li>
<li><a href="#yellow" data-toggle="tab">Yellow</a></li>
<li><a href="#green" data-toggle="tab">Green</a></li>
<li><a href="#blue" data-toggle="tab">Blue</a></li>
</ul>
<div id="my-tab-content" class="tab-content">
<div class="tab-pane active" id="red">
<h1>Red</h1>
<p>red red red red red red</p>
</div>
<div class="tab-pane" id="orange">
<h1>Orange</h1>
<p>orange orange orange orange orange</p>
</div>
<div class="tab-pane" id="yellow">
<h1>Yellow</h1>
<p>yellow yellow yellow yellow yellow</p>
</div>
<div class="tab-pane" id="green">
<h1>Green</h1>
<p>green green green green green</p>
</div>
<div class="tab-pane" id="blue">
<h1>Blue</h1>
<p>blue blue blue blue blue</p>
</div>
</div>
</div>
<script type="text/javascript">
jQuery(document).ready(function ($) {
$('#tabs').tab();
});
</script>
</div> <!-- container -->
<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
</body>
</html>
