【问题标题】:Twitter bootstrap nav class. Data-toggle stop menus workingTwitter 引导导航类。数据切换停止菜单工作
【发布时间】:2012-10-18 01:58:55
【问题描述】:

我对 Twitter Bootstrap 的 class="nav." 有疑问。

当我包含“data-toggle='tab'”时,我的菜单项都不起作用。

(顺便说一句:如果我删除数据切换,第一个选项不起作用,但其余的将,即如果数据切换被删除,谷歌不起作用,但 Bing 和 Bing2 会,雅虎不会工作,但 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" 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>

【问题讨论】:

  • 请检查您的控制台,li 元素有错误:未捕获的错误:语法错误,无法识别的表达式:(bing.com)
  • 不确定你的意思。我觉得还可以。

标签: html tabs twitter-bootstrap navigation nav


【解决方案1】:

这是一个工作示例:http://jsbin.com/ujujub/1/edit

三件事:

  • 记得包含bootstrap-tab.js
  • 编写一个脚本负责处理从标签页到标签页的导航
  • 链接不应直接指向您网站的内容,而应指向包装您网站内容的 div 的 ID。

【讨论】:

    猜你喜欢
    • 2015-05-15
    • 2017-05-30
    • 2015-08-30
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多