title: Bootstrap active menu highlight breaks when using pagination
body: <p>So I am using Twitter Bootstrap 3 to build my front-end, in this case simple tabbed menu. I was struggling a lot to make it work, because menu links didn't want to highlight properly when you click on them. By that I mean, if you for example click on the page about.php that link should be marked as active and therefore have some CSS styling applied on it. I saw many posts here on stackowerflow but they only partially worked for me. For example some jQuery code that people posted would do proper highlighting but would prevent links from working.</p>
  
  <p>Finally I have found a solution that is working great except when I use pagination. Let me explain:</p>
  
  <p>Here is the bootstrap html code of my menu:</p>
  
  <pre><code>    &lt;nav class="row"&gt;
      &lt;ul class="nav nav-tabs nav-justified"&gt;
          &lt;li&gt;&lt;a href="index.php"&gt; Home &lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="about.php"&gt; About Us &lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="contact.php"&gt; Contact Us &lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="services.php"&gt; Our Services&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="portfolio.php"&gt; Portfolio &lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;nav&gt;
  </code></pre>
  
  <p>In order to make menu highlighting working I am using this javaScrpt code:</p>
  
  <pre><code>var url = window.location;
  // Will only work if string in href matches with location
  $('ul.nav a[href="' + url + '"]').parent().addClass('active');
  
  // Will also work for relative and absolute hrefs
  $('ul.nav a').filter(function () {
      return this.href == url;
  }).parent().addClass('active').parent().parent().addClass('active'); 
  </code></pre>
  
  <p>So when I start the app index.php is marked as active and that is great, if I click on about.php I will go to that page and it is also marked as active, that is great too. But since I have pagination on index.php, and I click on Pagination link 2 url will change to: index.php?page=2, and highlighting will break, index.php will not be marked as active anymore. </p>
  
  <p>Do anyone know what is going on here, and what can we do to fix this ? I'm not that good with JS.</p>