title: Changing CSS for link of current page with jQuery
body: <p>New coder here and would really appreciate your help with a problem that's got me stumped.</p>
  
  <p>I'd like to write code that will recognize the link that applies to the current page and applies a different CSS style to that current link. I've researched this problem and have found that it's best accomplished using jQuery to identify the current link and then apply a new class to it (e.g., ".current"). However, when I've tried to implement this on the site it hasn't worked.</p>
  
  <p>This is the HTML I'm working with:</p>
  
  <pre><code>&lt;nav class="main-nav"&gt;
     &lt;a href="http://website.com" class="main-nav-link"&gt;
        &lt;span class="main-nav-item" id="nav-content"&gt;&lt;/span&gt;
     &lt;/a&gt;
     &lt;a href="http://website.com/calendar" class="main-nav-link"&gt;
        &lt;span class="main-nav-item" id="nav-calendar"&gt;&lt;/span&gt;
     &lt;/a&gt;
     &lt;a href="http://website.com/profile" class="main-nav-link"&gt;
        &lt;span class="main-nav-item" id="nav-profile"&gt;&lt;/span&gt;
     &lt;/a&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>And this is the CSS I've applied:</p>
  
  <pre><code>.main-nav .main-nav-item {
    height: 50px;
    width: 150px;
  }
  
  .main-nav #nav-content {
    background: url('/images/content-inactive.png') no-repeat center;
  }
  
  .main-nav #nav-calendar {
    background: url('/images/calendar-inactive.png') no-repeat center;
  }
  
  .main-nav #nav-profile {
    background: url('/images/profile-inactive.png') no-repeat center;
  }
  </code></pre>
  
  <p>My goal is to change the <code>background:</code> for the span within the current page's <code>&lt;a&gt;</code>.</p>
  
  <p>Here are some other StackOverflow threads that have addressed this problem, but haven't helped me to reach a solution:</p>
  
  <ul>
  <li><a href="https://stackoverflow.com/questions/2397370/how-to-change-the-link-color-of-the-current-page-with-css">Change link color of the current page with CSS</a></li>
  <li><a href="https://stackoverflow.com/questions/9863396/dynamically-change-css-of-link-based-on-current-page">Dynamically change CSS of link based on current page</a></li>
  </ul>
  
  <p>It's not completely clear to me where I'm supposed to be putting the Javascript, but I currently have it between <code>&lt;script type="text/javascript"&gt;</code> and <code>&lt;/script&gt;</code> in the <code>&lt;header&gt;</code> section.</p>
  
  <p>Thanks in advance for your assistance. :)</p>
  
  <p>--</p>
  
  <p><strong>UPDATE:</strong></p>
  
  <p>I currently have the following code in the page, but it's not working.</p>
  
  <p>The Javascript:</p>
  
  <pre><code>&lt;script&gt;
  
        $(document).ready(function() {
  
       // Get the current URL
              var currentUrl = window.location.href;
  
              // Get the span you want with a combination class and attribute and child jQuery selector
              var currentMenuItem = $(".main-nav-link[href='" + currentUrl + "'] &gt; .main-nav-item");
  
              // Then add your class
              currentMenuItem.addClass("current");
  
          });
  
  &lt;/script&gt;
  </code></pre>
  
  <p>And the CSS:</p>
  
  <pre><code>#nav-content.current {
    background: url('/images/content-active.png') no-repeat center -94px;
  }
  </code></pre>
  
  <p>The jQuery isn't adding the <code>.current</code> class to the active link, so the CSS doesn't even have the opportunity to work. </p>