title: Can't add a class to a list element and remove this same class from the other elements
body: <p>So I'm using a template found online (its name is "<a href="http://freemiumdownload.com/downloads/easy-start-business-free-foundation-template/" rel="nofollow" title="Easy Start">Easy Start</a>") on my website running with Ruby on Rails.</p>
  
  <p>The main difficulty is that i have a layout that contains the navigation bar from "easy start" and its footer, and the pages contents are kept in other files. </p>
  
  <p>The part where i have troubles is here :</p>
  
  <pre><code>&lt;div id="divMenuRight" class="pull-right"&gt;
    &lt;div class="navbar"&gt;
      &lt;button type="button" class="btn btn-navbar-highlight btn-large btn-primary" data-toggle="collapse" data-target=".nav-collapse"&gt;
            NAVIGATION &lt;span class="icon-chevron-down icon-white"&gt;&lt;/span&gt;
      &lt;/button&gt;
      &lt;div class="nav-collapse collapse"&gt;
        &lt;ul class="nav nav-pills ddmenu"&gt;
          &lt;li class="dropdown active"&gt; &lt;%=link_to 'Accueil', '/'%&gt;&lt;/li&gt;
          &lt;li class="dropdown"&gt; &lt;%=link_to 'À Propos', '/about'%&gt;&lt;/li&gt;
          &lt;li class="dropdown"&gt; &lt;%=link_to 'Contact', '/contact'%&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>As you can see, there are 2 classes at the first <code>&lt;li&gt;</code>, called "dropdown" and "active". "Active is what makes the button go red and show which page is active. </p>
  
  <p>So I tried to make a little jQuery function, where I get the current URL and try to add the "active" class to the correct <code>&lt;li&gt;</code> while removing it form the others in accordance to which page I'm currently on.</p>
  
  <pre><code>var url = $(location).attr('href')
  
  if(url ==="http://localhost:3000/"){
      $("li.dropdown:nth-child(0)").addClass("active");
      $("li.dropdown").not(this).removeClass("active");
  
  }
  else if(url ==="http://localhost:3000/about"){
      $("li.dropdown:nth-child(1)").addClass("active");
      $("li.dropdown").not(this).removeClass("active");
  }
  else if(url ==="http://localhost:3000/contact"){
      $("li.dropdown:nth-child(2)").addClass("active");
      $("li.dropdown").not(this).removeClass("active");
  }
  </code></pre>
  
  <p>But it doesn't work, and nothing on the internet gave me a solution...
  Am I (kinda) doing this the right way? Or how should i do this?</p>
  
  <p>Thank you in advance</p>