title: change color of selected anchor tag text with javascript
body: <p>i am trying to create a navigation menu as shown below. how do i get my javascript to change the color of selected anchor tag menu.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $(function() {
         $("#menu ul li a").click(function() {
         // remove classes from all
         $("#menu ul li a").removeClass("active");
         // add class to the one we clicked
         $(this).addClass("active");
        });
     });
  &lt;/script&gt;
  
  &lt;div id="menu"&gt;
     &lt;ul&gt;
          &lt;li&gt;&lt;a href="index.html" class="active"&gt;home&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="about.html"&gt;about&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="portfolio.html"&gt;portfolio&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="contact.html"&gt;contact&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#menu ul li a{background: -webkit-gradient(linear, left top, left bottom, from(#c5c5c5), to(#fff));;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;}
  
  #menu ul li a:hover {
      background: -webkit-linear-gradient(top, #009ec5 0%, #005890 50%, #41d2fc 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
      }
  
  #menu ul li a.active {
      background: -webkit-linear-gradient(top, #009ec5 0%, #005890 50%, #41d2fc 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  }
  </code></pre>