jquery - jQuery 更新后 Bootstrap 选项卡哈希 : Uncaught Error: Syntax error, 无法识别的表达式 : . nav-tabs a

标签 jquery twitter-bootstrap

我有带有一些 jquery 的 Bootstrap 选项卡,可以在页面重新加载或超链接上显示特定选项卡。 jQuery 从 1.11.3 更新到 2.2.4 后,它停止工作并给出此错误:未捕获错误:语法错误,无法识别的表达式:.nav-tabs a

有什么想法导致它以及如何解决它吗?下面是工作示例和损坏示例的链接:

Working example with jQuery 1.11.3

Broken example with jQuery 2.2.4

html:

<div>

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
   <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
   <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
   <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
   <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>

  <!-- Tab panes -->
  <div class="tab-content">
   <div role="tabpanel" class="tab-pane active" id="home">1...</div>
   <div role="tabpanel" class="tab-pane" id="profile">2...</div>
   <div role="tabpanel" class="tab-pane" id="messages">3...</div>
   <div role="tabpanel" class="tab-pane" id="settings">4...</div>
 </div>

js:

$(document).ready(function() {

 // Javascript to enable link to tab
 var url = document.location.toString();
 if (url.match('#')) {
   $('.nav-tabs a[href=#' + url.split('#')[1] + ']').tab('show');
 }

 // Change hash for page-reload
 $('.nav-tabs a').on('shown.bs.tab', function(e) {
    window.location.hash = e.target.hash;
  });

});

最佳答案

// Javascript to enable link to tab

var url = document.location.toString();
if (url.match('#')) {
   $('.nav-tabs a[href="#' + url.split('#')[1] + '"]').tab('show');
}

这对我有用。

关于jquery - jQuery 更新后 Bootstrap 选项卡哈希 : Uncaught Error: Syntax error, 无法识别的表达式 : . nav-tabs a,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37878766/

相关文章:

image - 在 div 内拉伸(stretch)背景并使其可滚动

javascript - 如何告诉javascript减少50px

css - 在 Bootstrap 中制作更小的按钮

jquery - 如何使用 jQuery 切换这两个 div?

javascript - 输入标签不适用于 Angular Directive(指令)( Bootstrap )

javascript - LeanModal 中的关闭按钮

html - 单选按钮的类型是什么?

jquery - 在 iframe 和父级之间传递 jquery 变量

javascript - 如何为 margin-top 分配最大限制

html - 在网页的一侧制作位置滚动按钮