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

Question

Completely new to HTML and CSS but I found code on this site for tabs with content that I would love to use as it is perfect for what I need, however I can't get it to work. 这是HTML和CSS的全新功能，但我在此站点上找到了一些代码标签，其中包含我想使用的内容，因为它非常适合我的需求，但是我无法使用它。 I checked all the answers and followed every advise giving, including the ordering of the links/script tags but it is still not working. 我检查了所有答案，并按照每条建议给出了建议，包括链接/脚本标签的顺序，但仍然无法正常工作。 It worked perfect in all the jfiddle code but not for me 它在所有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>

The only difference I found was this link I am using "link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"" 我发现的唯一区别是我使用的链接是“ link rel =“ stylesheet” href =“ http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css”“

Without this, the page does not display as tags. 没有这个，页面就不会显示为标签。 Is there another link I can use that will do the same job and get the code to work? 我是否可以使用另一个链接来完成相同的工作并使代码正常工作？ Or is there an alternative way to get this working? 还是有其他方法可以使它正常工作？

Help is much appreciate, thank you 帮助非常感谢，谢谢

Answer 1

Check this it will help you.. 选中它会为您提供帮助。

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

Answer 2

Maybe you use an old jQuery version. 也许您使用旧的jQuery版本。 I tried it with the jQuery CDN. 我尝试使用jQuery CDN。 You don't need twitter bootstrap for this and the script at the bottom of your script is not necessary to. 您不需要twitter引导程序，并且不需要脚本底部的脚本。 Here's your correct code. 这是您的正确代码。 Try it. 试试吧。 I have tested it and it worked. 我已经对其进行了测试，并且效果良好。

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

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

问题描述

2 个解决方案

解决方案1
5 已采纳 2015-09-16 07:12:50

解决方案2
1 2015-09-16 07:20:39

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

问题描述

2 个解决方案

解决方案1 5 已采纳 2015-09-16 07:12:50

解决方案2 1 2015-09-16 07:20:39

解决方案1
5 已采纳 2015-09-16 07:12:50

解决方案2
1 2015-09-16 07:20:39