Question

我点击它时，Twitter Bootstrap选项卡中的下拉列表没有做任何事情。我在Stackoverflow上搜索了可能的解决方案，但它们仍然不适用于我。我已经删除了data-toggle ='tab'。

仅供参考 - 我正在使用Twitter Bootstrap 3.0

见下面的代码：

<ul class="nav nav-tabs case-detail-nav" id="myTab">
   <li class="dropdown">
   <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-target="#">Text Files<b class="caret"></b></a>
   <ul class="dropdown-menu" role="menu">
     <li><a href='http://www.google.com/'>google</a></li>
   </ul>
   </li>
   <li class="active"><a href="#general">General</a></li>
 </ul>

参见Javascript：

<script>
  $(function () {
    $('#myTab a:last').tab('show')
  })


  $('#myTab a').click(function (e) {
  e.preventDefault()
  $(this).tab('show')
})  
</script>

非常感谢！

Answer 1

您在锚点击时遇到preventDefault问题，您不想为下拉菜单中的问题做这件事。所以在防止默认之前进行检查。 preventDefault()将阻止锚的默认行为，当您尝试显示$(this).tab('show')引导程序时，将href作为选择器选择要显示为选项卡的元素（这将导致jquery sizzle到期时出错选择器中的无效字符。）

 $('#myTab a').click(function (e) {
     if (!$(this).closest('.dropdown-menu').length) { //check if this is from dropdown
         e.preventDefault();
         $(this).tab('show');
     }
 });

或仅针对真实的标签触发器。

$('#myTab > li > a').click(function (e) {
         e.preventDefault();
         $(this).tab('show');
 });

Answer 2

对于遇到类似问题而遇到此事的其他人......

我遇到了同样的问题，但在我的情况下删除data-toggle属性解决了问题：

<ul class="dropdown-menu">
    <li><a href="http://www.gavinharriss.com/" target="_blank" data-toggle="collapse">Some link</a></li>
</ul>

变为

<ul class="dropdown-menu">
    <li><a href="http://www.gavinharriss.com/" target="_blank">Some link</a></li>
</ul>

如何将Bootstrap Tabs下拉列表链接到URL

2 个答案: