twitter bootstrap - jQuery syntax error: #/

Question

I am currently using jQuery, Twitter Bootstrap and AngularJS for my web application. I've been trying to do routing, but jQuery keeps giving me Syntax error, unrecognized expression: #/time whenever I try to click on the time tab, or vice versa. I have no idea which is causing this error, except that it is caused by the # sign. I have googled extensively but to no avail. Here is my code:

<ul class="nav nav-tabs">
  <li class="active">
    <a href="#/main" data-toggle="tab" id="main-tab">Main</a>
  </li>
  <li>
    <a href="#/time" data-toggle="tab" id="time-tab">Time Reports</a>
  </li>
</ul>

I need to keep the slash as I use it for my AngularJS routing (i.e. index.html#/main and index.html#/time will load different content in one of my divs). What could possibly be causing this error?

Answer 1

I guess extra slash in the href specifying id of the target. remove them and it should work fine.

<ul class="nav nav-tabs">
  <li class="active">
    <a href="#main" data-toggle="tab" id="main-tab">Main</a>
  </li>
  <li>
    <a href="#time" data-toggle="tab" id="time-tab">Time Reports</a>
  </li>
</ul>

Bootstrap looks at the href value as id for the target element to be shown as tab content. SO here in this case it would be looking for something with id = #/time which doesn't exist.

if you want to keep href intact you can use data-target attribute

<a href="#/main" data-toggle="tab" data-target="#main" id="main-tab">Main</a>

Demo