Question

I placed bootstrap tabs on my page, and is trying to active one dynamically from js. Here’s an example:

<ul class="nav nav-tabs">
<li class="active"><a href="?tab=day">Hot</a></li>
<li><a href="?tab=week">Week</a></li>
<li><a href="?tab=month">Month</a></li>
</ul>

<script>
    $(function () {
      $('.nav-tabs a[href="\\?tab\\=month"]').tab('show');
    });
</script>

But I always got:

Uncaught Error: Syntax error, unrecognized expression; ?tab=month

from jQuery (v1.7.1).

Edit:
I created a fiddle.

Answer 1

show() tries to active both the tab and its content, but the value of href “?tab=month” is not valid for jQuery to select the content.

My workaround is:

<ul class="nav nav-tabs">
<li class="active"><a href="?tab=day" data-target="#">Hot</a></li>
<li><a href="?tab=week" data-target="#">Week</a></li>
<li><a href="?tab=month" data-target="#">Month</a></li>
</ul>

<script>
$(function () {
  $('.nav-tabs a[href="?tab=month"]').tab('show');
});