title: How can I add/remove a class to an element when URL contains a specific string?
body: <p>I have some tabs:</p>
  
  <pre><code>&lt;!-- Nav tabs --&gt;
    &lt;ul class="nav nav-tabs" role="tablist"&gt;
      &lt;li role="presentation" id="hometab" class="active"&gt;&lt;a href="http://www.mypage.com/" &gt;Home&lt;/a&gt;&lt;/li&gt;
      &lt;li role="presentation" id="contenttab"&gt;&lt;a href="#content" aria-controls="content" role="tab" data-toggle="tab"&gt;content&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  
    &lt;!-- Tab panes --&gt;
    &lt;div class="tab-content"&gt;
      &lt;div role="tabpanel" class="tab-pane active" id="home"&gt;home&lt;/div&gt;
      &lt;div role="tabpanel" class="tab-pane" id="content"&gt;content&lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>And I would like to add a class to the tab, when my URL contains the string <code>?dir</code>.</p>
  
  <p>So for example: if my URL is <code>www.mypage.com/?dir=something</code> then <code>#contenttab</code> should be active. And if the URL is for example only <code>
  www.mypage.com</code> then <code>#contenttab</code> should not be active but <code>#hometab</code>should be active.</p>
  
  <pre><code>    &lt;script type="text/javascript"&gt;
  $(document).ready(function() {
      var url = location.pathname;
      if ("url:contains('?dir')") {
          $("#contenttab").attr("class","active");
          $("#hometab").removeClass("active");
  
      } else {
      $("#contenttab").removeClass("active");
      $("#hometab").attr("class","active");
      }
  
  });        
  &lt;/script&gt;
  </code></pre>
  
  <p>My script is not working. <code>#contenttab</code>is always active and <code>#hometab</code> is never active.</p>