Html Twitter引导导航类。数据切换停止菜单工作
我对Twitter引导的class=“nav”有问题 当我包含“data toggle='tab'”时,我的菜单项都不起作用 (顺便说一句:如果我删除数据切换,第一个选项不起作用,但其他选项会起作用,即如果删除数据切换,谷歌不起作用,但必应和Bing2会起作用,雅虎不起作用,但CNN和Weather会起作用) 代码如下:Html Twitter引导导航类。数据切换停止菜单工作,html,tabs,twitter-bootstrap,navigation,nav,Html,Tabs,Twitter Bootstrap,Navigation,Nav,我对Twitter引导的class=“nav”有问题 当我包含“data toggle='tab'”时,我的菜单项都不起作用 (顺便说一句:如果我删除数据切换,第一个选项不起作用,但其他选项会起作用,即如果删除数据切换,谷歌不起作用,但必应和Bing2会起作用,雅虎不起作用,但CNN和Weather会起作用) 代码如下: <!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/j
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.js"></script>
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap.js"></script>
<meta charset=utf-8 />
</head>
<body>
<ul id="myTab" class="nav nav-tabs" data-tabs="tabs">
<li class="active"><a href="http://www.google.com" data-toggle="tab">Google</a></li>
<li><a href="http://www.bing.com" data-toggle="tab">Bing</a></li>
<li><a href="http://www.bing.com" data-toggle="tab">Bing2</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">More choices <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="http://www.yahoo.com" data-toggle="tab">Yahoo</a></li>
<li><a href="http://www.cnn.com" data-toggle="tab">CNN</a></li>
<li><a href="http://www.accuweather.com">Weather</a></li> <!-- NOTE data-toggle removed -->
</ul>
</li>
</ul>
</body>
</html>
-
以下是一个工作示例:
三件事:
- 记住要包括
bootstrap tab.js
- 编写一个脚本,负责处理从一个选项卡到另一个选项卡的导航
- 链接不应该直接指向站点的内容,而是指向包装站点内容的div的ID