twitter-bootstrap 内容不工作的 Bootstrap 选项卡
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32601825/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap tab with content not working
提问by Siobhan Burke
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. 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
对 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>
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
非常感谢帮助，谢谢
回答by Amit singh
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>回答by Sim
Maybe you use an old jQuery version. I tried it with the jQuery CDN. You don't need twitter bootstrap for this and the script at the bottom of your script is not necessary to. Here's your correct code. Try it. I have tested it and it worked.
也许您使用旧的 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>
