Twitter Bootstrap选项卡不起作用：当我单击它们时，没有任何反应

81

我正在尝试在以下代码中实现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>
html  twitter-bootstrap 
— 德里克·N
source
3
添加data-toggle对我也起作用；Bootstrap 3也是如此。这是一个带有工作示例的bootply
— ericsoco 2013年

Answers:

87

您需要在代码中添加标签插件

<script type="text/javascript" src="assets/twitterbootstrap/js/bootstrap-tab.js"></script>

好吧，那没有用。我进行了一些测试，并且在以下情况下开始工作：

  1. 移动（更新至1.7）的jQuery脚本<head>节
  2. 添加data-toggle="tab"到<ul>标签元素的链接和ID
  3. 改变$(".tabs").tabs();以$("#tabs").tab();
  4. 和其他不重要的事情

这是一个代码

<!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>
— 百特
source
12
谢谢Bartek; 但是，我认为bootstrap.js脚本也包含bootstrap-tab.js。如果我错了，请纠正我。无论如何，我确实添加了bootstrap-tab.js，但仍然无法正常工作。
— DEREK N 2012年
您是对的，但它也取决于引导程序的自定义构建:) ...删除了注释的其他部分；没注意到您在别名命名空间...
— BartekR 2012年
也尝试过 不起作用。上面的HTML代码对您有用吗？
— DEREK N 2012年
4
谢谢Barek，它成功了！将jQuery升级到1.7和数据切换功能可以解决此问题。您甚至不需要script标记。
— DEREK N 2012年
由于这真的帮助-我并不需要移动jQuery脚本我只是跟着其他3个步骤
— 罗布
66

关键元素包括：

  1. 该class="nav nav-tabs"和data-tabs="tabs"的ul
  2. 该data-toggle="tab"和href="#orange"的a
  3. 的class="tab-content"的div内容
  4. 在class="tab-pane"与id该项目的div

完整的代码如下：

<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>
— 杰基
source
如果在选项卡变为活动状态以加载选项卡的内容时要调用函数怎么办？
— sureshvv
太好了，这个建议对我有所帮助。谢谢！
— NPC
如果将它与AngularJS一起使用，请给ul一个id =“ myTabs”，然后添加：$（'＃myTabs a'）。click（function（e）{e.preventDefault（）; $（this）.tab（ '节目'）; }）;
— 罗比·史密斯
在这个答案中，我喜欢这样的事实，即无需使用JavaScript即可初始化标签页。这对我有帮助。谢谢
— 真诚的
20

按照他们的在线指南，Bootstrap选项卡最近出现问题，但是元素中的标记示例data-tabs="tabs“目前缺少一个错误<ul>。如果不使用它data-toggle，则不能在链接上使用”。

— 艾达斯
source
16

您缺少data-toggle="tab"菜单URL上的数据标签，因此您的脚本无法区分选项卡开关在哪里：

的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>
— 安德烈斯·伊里奇（Andres Ilich）
source
4

我只是通过在锚标记中添加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'>中添加了以下内容

— 用户名
source
1

我尝试了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脚本。

— 用户名
source
0

对我来说，问题在于我不包括bootstrap.min.css（我仅包括bootstrap-sensitive.min.css）。

— 乔恩·昂斯托特
source
0

实际上，还有另一种简单的方法可以做到这一点。它对我有用，但我不确定你们。这里的关键是，只需在每个（选项卡窗格）中添加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>
— 乔·极客
source
我已经包含了 fade该类，但是这些选项卡仅在带有asnc bootstrap.min.js-file的Google Chrome中起作用。添加后， data-toggle="tab"这些选项卡也可以在Mozilla Firefox和MS Edge上使用。
— Grischa
0

当其他示例均未执行此操作时，此方法已解决：

$('#myTab a').click(function (e) {
  e.preventDefault();
  $(this).tab('show');
});
— 布罗克·亨斯利
source
0

在下载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>
谢谢，这是唯一对我有用的东西。问：如果运行良好，为什么该文件未包含在原始引导下载中？我只想确保自己能够访问引导程序以后所需的所有功能。
— user2223059
0

因为我有工作Bootstrap Javascript Modules，而不是加载整个Bootstrap Javascript，我的接片不工作，因为我忘了加载load/include/的node_modules/bootstrap/js/tab.js文件。

在此处输入图片说明

包含它之后，它起作用了...

祝好运

— 阿卡什
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.