Javascript Twitter引导选项卡不工作_Javascript_Html_Twitter_Tabs_Twitter Bootstrap

Javascript Twitter引导选项卡不工作

javascript html twitter tabs twitter-bootstrap

Javascript Twitter引导选项卡不工作,javascript,html,twitter,tabs,twitter-bootstrap,Javascript,Html,Twitter,Tabs,Twitter Bootstrap,我的标签没用。如果我将活动类移动到选项卡窗格上的其他区域，则当页面加载时会显示活动类，但当您单击选项卡时，不会发生任何事情。我的javascript正在运行，因为更少的代码正在运行，所以我不知道问题出在哪里 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Your Income Expert</title>

我的标签没用。如果我将活动类移动到选项卡窗格上的其他区域，则当页面加载时会显示活动类，但当您单击选项卡时，不会发生任何事情。我的javascript正在运行，因为更少的代码正在运行，所以我不知道问题出在哪里

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


你的收入专家

你的标志在这里
Main





保持联系





主标题
Lorem ipsum dolor sit amet，是一位杰出的献身者。毛里斯·尤普雷蒂姆·多洛。这是一只秃鹫。莫利斯权杖。梅塞纳斯·法雷特拉、马萨·莫利斯、智者大家庭以及非阿尔库地区的所有人
把一只小鹦鹉放在一边。佩伦特斯·奥古斯·利奥，瓦里乌斯·佩伦特斯·坦普斯坐在阿梅特，波苏尔坐在托托。埃尼安·康格·尼伯坐在特里斯蒂克广场上
标题
Lorem ipsum dolor sit amet，是一位杰出的献身者。这是一个自由的公民的生命。Nam vehicula arcu直径为vehicula pretium






Lorem ipsum dolor sit amet，是一位杰出的献身者。这是一个自由的公民的生命。Nam vehicula arcu直径为vehicula pretium。这是一个很好的例子。莫比·阿迪皮斯在埃吉特·埃利芬德的家里。不，这是turpis，这是一种温和的交通工具。无叶和叶舌
测试配置文件选项卡
测试消息选项卡
测试设置选项卡
$（函数（）{
$（'.tabs a:first'）.tab（'show'）
})
标题
Lorem ipsum dolor sit amet，是一位杰出的献身者。毛里斯·尤普雷蒂姆·多洛。这是一只秃鹫。莫利斯权杖。梅塞纳斯·法雷特拉、马萨·莫利斯、智者大家庭以及非阿尔库地区的所有人

向所有

-标记（应为选项卡）添加值为

选项卡的数据切换
属性，例如：
<li><a data-toggle="tab" href="#home">Service 1</a></li>

请在头标签中添加此js文件
//http://code.jquery.com/jquery-1.7.1.js“>
现在检查。。问题解决了
我这边一定出了什么问题。我建立了一个全新的清洁项目，并在你的链接中尝试了该示例，但没有任何效果。我启动了一个新项目，但它仍然不起作用。我上传到服务器，得到错误：Uncaught TypeError:无法读取未定义查询的属性“fn”，请在文档的标题中添加。
<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>