CODEWITHSUNDEEP
jquerytwitter-bootstrap
arduin
arduin

Reputation: 43

Bootstrap tabs hash after jQuery update: Uncaught Error: Syntax error, unrecognized expression: .nav-tabs a

I have Bootstrap tabs with some jquery to go show specific tab on page reload or hyperlink. After jQuery update from 1.11.3 to 2.2.4 it stopped working and gives this error: Uncaught Error: Syntax error, unrecognized expression: .nav-tabs a

Any ideas what causes it and how to fix it? Links to working and broken examples below:

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;
  });

});

Upvotes: 2

Views: 2818

Answers (1)

Arek SBC
Arek SBC

Reputation: 21

// Javascript to enable link to tab

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

This works for me.

Upvotes: 2

Related Questions