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

Question

我试图在以下代码中实现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>

Answer 1

您需要在代码中添加选项卡插件

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

嗯，它不起作用。我做了一些测试，它开始工作时：

移动（更新到1.7）jQuery脚本到<head>部分
将data-toggle="tab"添加到<ul> tab元素的链接和id
将$(".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>

Answer 2

当其他例子都没有时，这解决了它：

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

Answer 3

我有同样的问题，直到我下载bootstrap-tab.js并将其包含在我的脚本中，从这里下载<!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>  <script type="text/javascript" src="bootstrap/js/bootstrap.js"></script> </body> </html>

在jquery下面包含bootstrap-tab.js

Bootstrap Javascript Modules

最终代码看起来像这样：

Bootstrap Javascript

Answer 4

由于我正在使用load/include/而不是加载整个node_modules/bootstrap/js/tab.js，我的标签不起作用，因为我忘了加载 bootstrap.js文件。

qazxswpoi

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

祝好运

Answer 5

只需复制脚本标签，即可将qazxswpoi从头部添加到正文末尾。即使没有脚本来激活选项卡，一切都应该工作正常。

Answer 6

关键要素包括：

class="nav nav-tabs"和data-tabs="tabs"的ul和data-toggle="tab"
href="#orange"的a和class="tab-content"
div的class="tab-pane"内容
物品div的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>

完整代码如下：

their online guidelines

Answer 7

最近跟随data-tabs="tabs的Bootstrap标签有问题，但是他们的标记示例中存在错误<ul>“data-toggle元素上缺少Twitter Bootstrap Js (tabs, popups, dropdown) not working in Drupal。没有它在链接上使用jquery.js不起作用。

Answer 8

我有同样的问题，但上面的一些答案可能对我来说很棘手。

我发现另一个答案可能解决你的问题bootstrap.tab.js

在data-toggle="tab"之前放置<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>

Answer 9

您在菜单网址上缺少<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>数据标记，因此您的脚本无法分辨您的标签切换位置：

HTML

<!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>

Answer 10

我刚刚通过在锚标记中添加data-toggle =“tab”元素来修复此问题

<script src...>

并在头部http://code.jquery.com/jquery-1.7.1.js'>中添加了以下内容

Answer 11

我尝试了bootstrap文档中的代码，如下所示：

<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.js之前加载你的jquery脚本。

Answer 12

对我来说，问题是我没有包括bootstrap.min.css（我只包括bootstrap-responsive.min.css）。

Answer 13

实际上，还有另一种简单的方法。它适合我，但我不确定你们。关键在于，只需在每个（选项卡窗格）中添加FADE即可。此外，您甚至不需要脚本函数或任何版本的jQuery。这是我的代码...希望它对你们都有用。

https://code.google.com/p/fusionleaf/source/browse/webroot/fusionleaf/com/www/inc/bootstrap/js/bootstrap-tab.js?r=82aacd63ee1f7f9a15ead3574fe2c3f45b5c1027

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

问题描述投票：80回答：13

13个回答

最新问题

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

问题描述 投票：80回答：13

13个回答

最新问题

问题描述投票：80回答：13