Twitter Bootstrap标签不适合我 [英] Twitter Bootstrap tabs not working for me
本文介绍了Twitter Bootstrap标签不适合我的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我是Twitter Bootstrap（通常是web dev）的新手，并试图在下面的代码中实现它的选项卡，但似乎并不奏效。标签显示，但是当我点击它们时，没有任何反应。有人可以帮我吗？以下是我正在使用的唯一代码。所有其他CSS / JS脚本都是从Twitter Bootstrap框架中复制而来的。
I am new to Twitter Bootstrap (and web dev in general), and am trying to implement its tabs in the following code, but it does not seem to work. The tabs get displayed, but when I click on them nothing happens. Can someone please help me out? Below is the only code I am using. All the other CSS/JS scripts are copied from Twitter Bootstrap framework.
<!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>
推荐答案
您需要将标签插件添加到代码中
You need to add tabs plugin to your code
<script type="text/javascript" src="assets/twitterbootstrap/js/bootstrap-tab.js"></script>
好吧，它不起作用。我做了一些测试，它开始工作时：
Well, it didn't work. I made some tests and it started working when:
- 移动（更新为1.7）jQuery脚本为
< head> ; section - 添加了
data-toggle =tab< code> $（。tabs）。tabs（）; to$（＃tabs）.tab（）; - 和其他一些不重要的事情 li>
- moved (updated to 1.7) jQuery script to
<head>section - added
data-toggle="tab"to links and id for<ul>tab element - changed
$(".tabs").tabs();to$("#tabs").tab(); - and some other things that shouldn't matter
这是一个代码
Here's a code
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Le styles -->
<link href="../bootstrap/css/bootstrap.css" rel="stylesheet">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
</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">
jQuery(document).ready(function ($) {
$('#tabs').tab();
});
</script>
</div> <!-- container -->
<script type="text/javascript" src="../bootstrap/js/bootstrap.js"></script>
</body>
</html>
这篇关于Twitter Bootstrap标签不适合我的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
