Twitter引导选项卡不起作用

Question

My tabs just plain aren't working. 我的标签无法正常使用。 If I move the active class in a different area on the tab panes, the active one displays when the page loads, but when you click on a tab, nothing happens. 如果将活动类移动到选项卡窗格的其他区域中，则在页面加载时将显示活动类，但是当您单击选项卡时，什么也不会发生。 My javascript is running, because less is working, so I don't know what the problem could be. 我的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>

Answer 1

Add to all a -tags (which should be tabs) the data-toggle attribute with the value tab , eg: 添加到所有a标签都有效（这应该是选项卡）的data-toggle与所述值属性tab ，例如：

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

Also see this example ; 另请参见此示例； the 3rd tab is selected by setting the class active to the li . 所述第三标签是通过设置的类别中选择active的li 。

PS: your javascript ( $(function () { $('.tabs a:first').tab('show') }) ) is not neccessary. PS：不需要您的javascript（ $(function () { $('.tabs a:first').tab('show') }) ）。

=== UPDATE === ===更新===

For your example link in your command the document head should look like: 对于命令中的示例链接，文档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>

Answer 2

Please add this js file in your head tag 请在您的head标签中添加此js文件

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

and now check.. problem is solved 现在检查..问题解决了

Twitter引导选项卡不起作用

问题描述

2 个解决方案

解决方案1
3 已采纳 2012-03-07 08:29:45

解决方案2
-2 2013-08-01 06:16:51

Twitter引导选项卡不起作用

问题描述

2 个解决方案

解决方案1 3 已采纳 2012-03-07 08:29:45

解决方案2 -2 2013-08-01 06:16:51

解决方案1
3 已采纳 2012-03-07 08:29:45

解决方案2
-2 2013-08-01 06:16:51