Question

完全是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>

我找到的唯一区别是我使用的这个链接＆＃34; link rel =＆＃34; stylesheet＆＃34; HREF =＆＃34; HTTP：//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"＆＃34;

如果没有这个，页面就不会显示为标签。是否有另一个我可以使用的链接可以完成相同的工作并使代码工作？或者是否有其他方法可以实现这一目标？

非常感谢帮助，谢谢

Answer 1

检查这会对你有帮助..

＆＃13;

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

＆＃13;

Answer 2

也许你使用旧的jQuery版本。我用jQuery CDN试了一下。您不需要twitter bootstrap，脚本底部的脚本也不需要。这是你正确的代码。试试吧。我测试过它并且有效。

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

内容无效的Bootstrap选项卡

2 个答案: