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

Question

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

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

Run Code Online (Sandbox Code Playgroud)

Answer 1

Bar*_*ekR 86

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

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

Run Code Online (Sandbox Code Playgroud)

嗯,它不起作用.我做了一些测试,它开始工作时:

移动(更新到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>

Run Code Online (Sandbox Code Playgroud)

谢谢Bartek; 但是,我认为bootstrap.js脚本也包含bootstrap-tab.js.如果我错了,请纠正我.无论如何,我确实添加了bootstrap-tab.js,它仍然无法正常工作. (12认同)
谢谢Barek,它有效!将jQuery升级到1.7并且数据切换事物解决了这个问题.您甚至不需要脚本标记. (4认同)

Answer 2

Jac*_*cky 65

关键要素包括:

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

完整代码如下:

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

Run Code Online (Sandbox Code Playgroud)

Answer 3

小智 20

最近在他们的在线指南中遇到了Bootstrap选项卡的问题,但是他们的标记示例中当前存在错误data-tabs="tabs" <ul>元素上缺少.如果没有data-toggle在链接上使用它不起作用.

Answer 4

kew*_*ang 18

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

我发现另一个答案可能解决你的问题Twitter Bootstrap Js(标签,弹出窗口,下拉菜单)在Drupal中不起作用

jquery.js之前的地方bootstrap.tab.js

Answer 5

And*_*ich 16

您错过了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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	13 年，6 月前
查看次数：	153262 次
最近记录：	6 年，3 月前