添加选项卡窗格后引导选项卡下拉菜单不起作用答案

【问题标题】：bootstrap tab dropdown not working after adding tab-pane添加选项卡窗格后引导选项卡下拉菜单不起作用
【发布时间】：2013-10-02 04:10:27
【问题描述】：

我是网页设计和引导程序方面的新手。我正在尝试使用选项卡创建标题..并添加一个下拉菜单..代码看起来像这样..

<body>
    <div class="tabbable">
        <ul class="nav nav-tabs">
            <li class="active"><a href="#1" data-toggle="tab">Home</a></li>
            <li class="dropdown">
                <a href="#2" class="dropdown-toogle" data-toggle="dropdown">Tentang Kami<span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action1</a></li>
                    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action2</a></li>
                    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action3</a></li>
                </ul>
            </li>
            <li><a href="#3" data-toggle="tab">Contact Us</a></li>
        </ul>
        <div class="tab-content">
            <div class="tab-pane active" id="1">
                <iframe src="pages/home.html" width="1250" height="500" frameborder="0"></iframe>
            </div>
            <div class="tab-pane active" id="2">
                <iframe src="pages/sejarah.html" width="1250" height="500" frameborder="0"></iframe>
            </div>
            <div class="tab-pane active" id="3">
                <iframe src="pages/contactus.html" width="1250" height="500" frameborder="0"></iframe>
            </div>
            <div class="tab-pane active" id="4">
                <iframe src="pages/visimisi.html" width="1250" height="500" frameborder="0"></iframe>
            </div>
            <div class="tab-pane active" id="5">
                <iframe src="pages/progstudi.html" width="1250" height="500" frameborder="0"></iframe>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        $(document).ready(function(){
            $(".tab-pane.active").hide(); // Hide all tab conten divs by default
            $(".tab-pane.active:first").show(); // Show the first div of tab content by default
        });
    </script>
</body>

所以，“Tentang Kami”选项卡应该由一个下拉列表表示..但是当我尝试它时，下拉列表不会显示.. 但是，当我尝试清空 <div class="tab-content"> 中的文本时，下拉菜单起作用了.. 我错过了什么吗？对不起我的英语不好

【问题讨论】：

首先将你的 js 缩短为一行 $(".tab-pane.active").not(":first").hide() - 你有一个页面或一个 js 小提琴和css 最重要的是

标签： javascript css twitter-bootstrap-3

【解决方案1】：

您的下拉菜单不起作用，因为您有 href="#2"，其中存在 id="2"。下拉插件在这里需要一个无效的目标。解决方案将href="#2" 更改为href="#" 或将data-target="nonsense" 添加到您的切换锚。

插件尝试通过以下方式查找父级的原因：

  function getParent($this) {
    var selector = $this.attr('data-target')

    if (!selector) {
      selector = $this.attr('href')
      selector = selector && /#/.test(selector) && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7
    }

    var $parent = selector && $(selector)

    return $parent && $parent.length ? $parent : $this.parent()
  }

当您的锚点中没有数据目标（这很有意义）时，href 将被测试。当此属性退出时，它有一个长度，并且此元素的父级将作为下拉列表的父级返回。

由于Is href required on links? 似乎不需要href，因此最好的解决方案是将非href 属性添加到带有data-toggle="dropdown" 的锚点。

请注意，您仅使用数字定义您的 id，请参阅：What are valid values for the id attribute in HTML?

【讨论】：

我将 href="#2" 更改为 href="#" 并且成功了！非常感谢:)