Twitter Bootstrap选项卡不起作用:当我点击它们时，什么也没有发生
Twitter Bootstrap选项卡不起作用:当我点击它们时，什么也没有发生
提问于 2012-03-09 15:47:58
我尝试在下面的代码中实现Twitter Bootstrap选项卡，但似乎不起作用。选项卡将显示，但当我单击它们时，什么也不会发生。下面是我使用的唯一代码。所有其他CSS/JS脚本都是从Twitter Bootstrap框架复制的。
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Le styles -->
<link href="assets/twitterbootstrap/css/bootstrap.css" rel="stylesheet">
<link href="assets/twitterbootstrap/css/bootstrap-responsive.css" rel="stylesheet">
</head>
<body data-spy="scroll" data-target=".subnav" data-offset="50">
<div class="container">
<!-------->
<div id="content">
<ul class="nav nav-tabs" data-tabs="tabs">
<li class="active"><a href="#red">Red</a></li>
<li><a href="#orange">Orange</a></li>
<li><a href="#yellow">Yellow</a></li>
<li><a href="#green">Green</a></li>
<li><a href="#blue">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">
jQuery(document).ready(function ($) {
$(".tabs").tabs();
});
</script>
</div> <!-- container -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.js"></script>
<script type="text/javascript" src="assets/twitterbootstrap/js/bootstrap.js"></script>
</body>
</html>回答 8
Stack Overflow用户
发布于 2012-09-26 19:37:59
最近跟在their online guidelines后面的Bootstrap标签有问题，但目前在他们的标记示例中有一个错误，“data-tabs="tabs在<ul>元素上缺失。没有它，在链接上使用data-toggle是不起作用的。”
Stack Overflow用户
发布于 2013-07-19 16:18:53
我尝试了bootstrap文档中的代码，如下所示：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>tab demo</title>
<link rel="stylesheet" href="bootstrap.css">
</head>
<body>
<div class="span9">
<div class="tabbable"> <!-- Only required for left/right tabs -->
<ul class="nav nav-tabs">
<li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
<li><a href="#tab2" data-toggle="tab">Section 2</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p>I'm in Section 1.</p>
</div>
<div class="tab-pane" id="tab2">
<p>Howdy, I'm in Section 2.</p>
</div>
</div>
</div>
</div>
<script src="jquery.min.js"></script>
<script src="bootstrap.js"></script>
</body>
</html>而且它是有效的。但是当我切换这两个<script src...>的位置时，它不工作，所以请记住在bootstrap.js之前加载你的jquery脚本。
Stack Overflow用户
发布于 2013-04-08 14:22:40
对我来说，问题是我没有包括bootstrap.min.css (我只包括bootstrap-responsive.min.css)。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/9630595
复制相关文章
相似问题