title: jquery highlight the link when clicked
body: <p>How do I use jquery to highlight the link when I click on it?</p>
  
  <p>For example, when I click on the link class1_1, I want to make this link red (or another color).</p>
  
  <p>The javascript code here:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
   $(function(){
    $("#menu li").each(function(){
       $(this).click(function(event){
         var ul=$(this).children("ul")
         var span = $(this).children("span")
         if(ul.html()!=null)
         {
            if(ul.css("display")=="none")
            {
              ul.css("display","block");
              span.addClass("up")
            }else
            {
              ul.css("display","none")
              span.removeClass("up")
            }
             event.stopPropagation();
         }else
         {
           event.stopPropagation();
         }
       });
    });
    return false;
   });
  &lt;/script&gt;
  </code></pre>
  
  <p>The html code here:</p>
  
  <pre><code>&lt;ul id="menu"&gt;
  
  &lt;li class="title"&gt;&lt;span&gt;class1 &lt;/span&gt;
  &lt;ul&gt;
    &lt;li&gt;&lt;a href=""&gt;class1_1&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href=""&gt;class1_2&lt;/a&gt;&lt;/li&gt;
   &lt;/ul&gt;
   &lt;/li&gt;
  &lt;li class="title"&gt;&lt;span&gt;class2&lt;/span&gt;
     &lt;ul&gt;
    &lt;li&gt;&lt;span&gt;class2_1&lt;/span&gt;
     &lt;ul&gt;
      &lt;li&gt;&lt;a href=""&gt;class2_1_1&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=""&gt;class2_1_1&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
    &lt;/li&gt;
   &lt;/ul&gt;
  &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>maybe I can't explanation my question clearly,I mean is the last onclick link make it </p>
  
  <p>color to red and another links set to there default color</p>