Twitter Bootstrap 选项卡不工作答案

【问题标题】：Twitter Bootstrap Tabs Not WorkingTwitter Bootstrap 选项卡不工作
【发布时间】：2012-03-07 07:29:07
【问题描述】：

我的标签无法正常工作。如果我将活动类移动到选项卡窗格上的不同区域，则在页面加载时会显示活动类，但是当您单击选项卡时，什么也不会发生。我的 javascript 正在运行，因为 less 正在运行，所以我不知道可能是什么问题。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Your Income Expert</title>
    <link rel="stylesheet/less" type="text/css" href="less/style.less">
    <script src="js/less.js" type="text/javascript"></script>
    <script src="js/bootstrap-tab.js" type="text/javascript"></script>
</head>

<body>
    <div class="container">
      <div class="row">
        <div class="span3">
          <div class="well sidebar-nav">
            <ul class="nav nav-list">
                <li><h2>Your Logo Here</h2></li>
                 <li class="nav-header">Main</li>
                 <li class="active"><a href="#">Home</a></li>
                 <li><a href="#">Company</a></li>
                 <li><a href="#">Services</a></li>
                 <li><a href="#">Books</a></li>
                 <li><a href="#">Contact</a></li>
                 <li class="nav-header">Keep In Touch</li>
                 <li><a href="#">Facebook</a></li>
                 <li><a href="#">Twitter</a></li>
                 <li><a href="#">LinkedIn</a></li>
                 <li><a href="#">Blog</a></li>
            </ul>
          </div><!--/.well -->
        </div><!--/span-->
        <div class="span9">
            <div class="well">
                <div id="motivator">
                    <img src="broker.png" alt="" />
                </div>

                <h2 id="motivator-subtext">Main Heading</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eu pretium dolor. Ut a vulputate turpis. Donec dignissim mollis scelerisque. Maecenas pharetra, massa a varius mollis, magna odio suscipit sapien, et posuere tellus tellus non arcu.</p>
                <p>Fusce a tincidunt purus. Pellentesque augue leo, varius pellentesque tempus sit amet, posuere at tortor. Aenean congue nibh sit amet quam tristique.</p>

                <h3>Heading</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla laoreet neque sit amet libero pulvinar vitae consequat ante adipiscing. Nam vehicula arcu in diam vehicula pretium.</p>

                <ul class="nav nav-tabs">
                  <li><a href="#home">Service 1</a></li>
                  <li><a href="#profile">Service 2</a></li>
                  <li><a href="#messages">Service 3</a></li>
                  <li><a href="#settings">Service 4</a></li>
                </ul>

                <div class="tab-content">
                  <div class="tab-pane active" id="home">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla laoreet neque sit amet libero pulvinar vitae consequat ante adipiscing. Nam vehicula arcu in diam vehicula pretium. Nulla volutpat tellus ut tellus consectetur blandit egestas est ullamcorper. Morbi adipiscing suscipit quam eget eleifend. Nam est turpis, blandit sed vehicula ut, aliquet quis turpis. Nulla et ligula in.</p>
                  </div>
                  <div class="tab-pane" id="profile">
                    <p>Testing the profile tab.</p>
                  </div>
                  <div class="tab-pane" id="messages">
                    <p>Testing the messages tab</p>
                  </div>
                  <div class="tab-pane" id="settings">
                    <p>Testing the settings tab.</p>
                  </div>
                </div>
                <script>
                  $(function () {
                    $('.tabs a:first').tab('show')
                  })
                </script>

                <h3>Heading</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eu pretium dolor. Ut a vulputate turpis. Donec dignissim mollis scelerisque. Maecenas pharetra, massa a varius mollis, magna odio suscipit sapien, et posuere tellus tellus non arcu.</p>
            </div>
        </div>
    </div>
</body>
</html>

【问题讨论】：

标签： javascript html twitter tabs twitter-bootstrap

【解决方案1】：

将值为tab 的data-toggle 属性添加到所有a-tags（应该是标签），例如：

<li><a data-toggle="tab" href="#home">Service 1</a></li>

另见this example;通过将类 active 设置为 li 来选择第三个选项卡。

P.S.：您的 javascript ($(function () { $('.tabs a:first').tab('show') })) 不是必需的。

=== 更新 ===

对于命令中的示例链接，文档head 应如下所示：

<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Your Income Expert</title>
    <link type="text/css" rel="stylesheet/less" href="less/style.less">
    <link type="text/css" rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
    <script type="text/javascript" src="js/less.js"></script>
    <script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
    <script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/bootstrap-tab.js"></script>
</head>

【讨论】：

我这边一定有问题。我建立了一个全新的干净项目并尝试了您链接中的示例，但没有任何效果。
我开始了一个新项目，但它仍然无法正常工作。我上传到服务器 joshthagreatest.com/Web%20Design 并收到错误：未捕获的类型错误：无法读取未定义的属性 'fn'
缺少 jQuery，请在文档的 head 中添加 <script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>。

【解决方案2】：

请将此js文件添加到你的head标签中

// http://code.jquery.com/jquery-1.7.1.js'>

现在检查..问题解决了

【讨论】：