Twitter引导程序导航类。数据切换停止菜单正常工作 [英] Twitter bootstrap nav class. Data-toggle stop menus working
本文介绍了Twitter引导程序导航类。数据切换停止菜单正常工作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
当我包含data-toggle ='选项卡'时，我的菜单项中没有任何功能。
（顺便说一句：如果我删除了数据切换，第一个选项不起作用，但其余的将会如果数据切换被删除，Google不起作用，但Bing和Bing2将会和Yahoo不会合作，但CNN和Weather会这样做）
这是代码：
<！DOCTYPE html>
< html>
< head>
< script src =http://code.jquery.com/jquery.js>< / script>
< link href =http://twitter.github.com/bootstrap/assets/css/bootstrap.css =stylesheettype =text / css/>
< script src =http://twitter.github.com/bootstrap/assets/js/bootstrap.js>< / script>
< meta charset = utf-8 />
< / head>
< body>
< ul id =myTabclass =nav nav-tabsdata-tabs =tabs>
< li class =active>< a href =http://www.google.comdata-toggle =tab> Google< / a>< / li>
< li>< a href =http://www.bing.comdata-toggle =tab>必应< / a>< / li>
< li>< a href =http://www.bing.comdata-toggle =tab> Bing2< / a>< / li>
< li class =dropdown>
< a href =＃class =dropdown-toggledata-toggle =dropdown>更多选择< b class =caret>< / b>< / a>
< ul class =dropdown-menu>
< li>< a href =http://www.yahoo.comdata-toggle =tab> Yahoo< / a>< / li>
< li>< a href =http://www.cnn.comdata-toggle =tab> CNN< / a>< / li>
< li>< a href =http://www.accuweather.com>天气< / a>< / li> <！ - NOTE data-toggle removed - >
< / ul>
< / li>
< / ul>
< / body>
< / html>
解决方案
下面是一个工作示例： http://jsbin.com/ujujub/1/edit
- 请记住包含
bootstrap-tab.js - 编写一个脚本负责处理从标签到标签的导航
- 链接不应该直接指向您网站的内容，而应该指向标识的div包装你的网站的内容。
I have a problem with Twitter Bootstrap's class="nav."
When I include "data-toggle='tab'", none of my menu items function.
(BTW: If I remove data-toggle, the first option does not work, but the rest will i.e. if data-toggle is removed, Google does NOT work, but Bing and Bing2 will, and Yahoo won't work, but CNN and Weather do)
This is the code:
<!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>
解决方案
Here is a working example: http://jsbin.com/ujujub/1/edit
Three things:
- Remember to include
bootstrap-tab.js - Write a script responsible for handling navigation from tab to tab
- The links should not point directly to the content of your sites, but rather to the the ID of divs that wrap the content of your sites.
这篇关于Twitter引导程序导航类。数据切换停止菜单正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
