内容不起作用的引导选项卡答案

【问题标题】：Bootstrap tab with content not working内容不起作用的引导选项卡
【发布时间】：2015-12-12 15:21:55
【问题描述】：

对 HTML 和 CSS 完全陌生，但我在这个网站上找到了包含我喜欢使用的内容的标签的代码，因为它非常适合我的需要，但是我无法让它工作。我检查了所有答案并遵循了每一个建议，包括链接/脚本标签的顺序，但它仍然无法正常工作。它在所有 jfiddle 代码中都能完美运行，但不适合我

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

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">  
<script type="text/javascript" src="libraries/jquery.js"></script>
<script type="text/javascript" src="assets/twitterbootstrap/js/bootstrap-tab.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
<title>TEST tabs</title>

</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">
$(document).ready(function () {
    $('#tabs').tab();
});
</script>    
</div> <!-- container -->


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

</body>
</html>

我发现的唯一区别是我使用的这个链接 "link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css""

没有这个，页面不会显示为标签。我可以使用另一个链接来完成相同的工作并使代码正常工作吗？或者有没有其他方法可以让这个工作？

非常感谢您的帮助，谢谢

【问题讨论】：

删除两个 bootstrap.js。一个在头部，另一个在 </body> 之前。然后在调试器中检查控制台。
尝试将 bootstrap.js 放在标题中
你的jquery在哪里，bootstrap.js需要jquery来执行所以添加到body标签的末尾
@jayD 在缩小版的头部已经存在。 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

检查一下它会对你有帮助..

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

<head>
  <meta charset="utf-8" />
  <title>Bootstrap, from Twitter</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="description" content="" />
  <meta name="author" content="" />
  <!-- Le styles -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <style>
  </style>
</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>
    <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 src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>


</body>

</html>

【讨论】：

这行得通！你能解释一下为什么不用 js 脚本就能工作吗？
bootstrap.min.js 和 jquery 处理它

【解决方案2】：

也许您使用的是旧的 jQuery 版本。我用 jQuery CDN 试过了。为此，您不需要 twitter 引导程序，并且不需要脚本底部的脚本。这是您的正确代码。试试吧。我已经测试过了，它确实有效。

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

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">  
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
<title>TEST tabs</title>

</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">
$(document).ready(function () {
    $('#tabs').tab();
});
</script>    
</div> <!-- container -->



</body>
</html>

【讨论】：