title: How to change list item color with JQuery
body: <p>I have a menu that when certain items (li classes) are clicked, it scrolls to the appropriate point. I was wondering how I could keep that same list item in a certain state while it is scrolled at the appropriate point, and change it back accordingly, depending on what list item is clicked? Any help would be great.</p>
  
  <p>Here is my JQuery ---></p>
  
  <pre><code>&lt;script&gt;
  $(function() {  
  $('.full-web').click(function(){
      $(this).css('backgroundColor', '#e9f7ff');
      $(this).css('color', '#000828');
      $(this).css('borderBottomColor', '#000828');
      $(this).css('borderBottomWidth', '10px')
  
    });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>HTML ---></p>
  
  <pre><code>&lt;nav class="container"&gt;
  &lt;ul&gt;
  &lt;li class="full-web" style="background-color:#3a9bc3;"&gt;FULL WEBSITES&lt;/li&gt;
  &lt;li class="ui" style="background-color:#50a2c3;"&gt;UI/DESIGN&lt;/li&gt;
  &lt;li class="landing-pages" style="background-color:#65a8c3;"&gt;LANDING PAGES&lt;/li&gt;
  &lt;li class="web" style="background-color:#59a5c3;"&gt;WEB BANNERS&lt;/li&gt;
  &lt;li class="email" style="background-color:#4aa0c3;"&gt;E-MAIL DESIGNS&lt;/li&gt;
  &lt;li class="print" style="background-color:#3a9bc3;"&gt;PRINT ADS&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/nav&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS ---></p>
  
  <pre><code>nav.container ul {
      height:60px;
      top:0px;
      margin:0px!important;
      padding:0px!important;
      text-align:center;
  }
  
  nav.container {
      position:relative;
      top:-5px;
      width:100%;
      height:60px;
      background-color:#1e94c4;
      z-index:50;
      border-bottom:5px solid #b7e9fc;
  }
  
  li.full-web, li.ui, li.landing-pages, li.web, li.email, li.print, li.resume, li.about, li.contact {
      position:relative;
      margin-right:-4px;
      padding-left:13px;
      padding-right:13px;
      padding-top:0px;
      top:0px;
      left:0px;
      font-family:myriad pro, arial, sans-serif;
      color:#ffffff;
      font-size:1.75em;
      text-align:center;
      line-height:2.15em;
      outline:none;   
      list-style:none;
      display:inline-block;
      transition:750ms;
      -webkit-transition:750ms;
  }
  
  li.full-web:hover, li.ui:hover, li.landing-pages:hover, li.web:hover, li.email:hover, li.print:hover, li.resume:hover, li.about:hover, li.contact:hover {
      cursor:pointer;
      background-color:#e9f7ff!important;
      color:#000828;
      border-bottom:10px solid #000828;
      transition:100ms;
      -webkit-transition:100ms;
  }
  
  li.full-web:active, li.ui:active, li.landing-pages:active, li.web:active, li.email:active, li.print:active, li.resume:active, li.about:active, li.contact:active {
      top:0px;
      border-bottom:10px solid #86cbe8;
      cursor:pointer;
      outline:none;
      transition:250ms;
      -webkit-transition:250ms;
  }
  </code></pre>