Twitter Bootstrap标签不适合我
我是新的Twitter Bootstrap（和一般的Web开发），并试图在下面的代码中实现它的标签，但它似乎并没有工作。 标签显示，但是当我点击他们什么也没有发生。 有人可以帮我吗？ 以下是我使用的唯一代码。 所有其他的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> 你需要添加标签插件到你的代码
<script type="text/javascript" src="assets/twitterbootstrap/js/bootstrap-tab.js"></script>
那么，它没有工作。 我做了一些testing，并开始工作时：
- 将（更新到1.7）jQuery脚本移动到
<head>部分 - 将
data-toggle="tab"到<ul>标签元素的链接和标识 - 改变了
$(".tabs").tabs();到$("#tabs").tab(); - 和其他一些不重要的事情
这是一个代码
<!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>
关键要素包括：
-
ul的class="nav nav-tabs"和data-tabs="tabs" -
data-toggle="tab"和href="#orange"的a -
class="tab-content"div的class="tab-content" -
class="tab-pane"和项目的dic的id
完整的代码如下：
<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>
Bootstrap选项卡最近有一个问题，遵循他们的在线指导原则 ，但是在<ul>元素上缺less标记示例data-tabs="tabs ”。 没有它在链接上使用data-toggle不起作用。
我有同样的问题，但上面的一些答案可能会对我来说很棘手。
我发现其他答案也许解决你的问题Twitter Bootstrap Js（标签，popup窗口，下拉列表）不工作在Drupal
在
bootstrap.tab.js之前放置jquery.js
你错过了你的菜单上的data-toggle="tab"数据标签，所以你的脚本无法知道你的标签开关在哪里：
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>
我只是通过在锚标签中添加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>
并在头部分添加了以下内容：http://code.jquery.com/jquery-1.7.1.js'>;
我尝试从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>
它的工作。 但是当我切换这两个<script src...>的位置时，它不起作用。 所以请记得在bootstrap.js之前加载你的jquery脚本。
对我来说，问题是我不包括bootstrap.min.css（我只包括bootstrap-responsive.min.css）。
其实，还有另一个简单的方法来做到这一点。 它适用于我，但我不知道你们。 这里最关键的是在每个（tab-pane）中添加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>
当其他例子都没有时，这解决了它：
$('#myTab a').click(function (e) { e.preventDefault(); $(this).tab('show'); });
我有同样的问题，直到我下载bootstrap-tab.js并将其包含在我的脚本，从这里下载https://code.google.com/p/fusionleaf/source/browse/webroot/fusionleaf/com/www/inc /bootstrap/js/bootstrap-tab.js?r=82aacd63ee1f7f9a15ead3574fe2c3f45b5c1027
包括在jquery下面的bootsrap-tab.js
<script type="text/javascript" src="bootstrap/js/bootstrap-tab.js"></script>
最终代码看起来像这样：
<!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>
因为我正在使用Bootstrap Javascript Modules而不是加载整个Bootstrap Javascript ，所以我的标签没有工作，因为我忘了加载load/include/ node_modules/bootstrap/js/tab.js文件。
包括它后，它工作…
祝你好运
只需复制脚本标记，将head部分中的bootstrap.js添加到主体的末尾即可。 然后，即使没有脚本来激活标签，一切都应该正常工作。
