title: dynamically highlighting a tab using css
body: <p>I have the following code and I want to highlight the currently selected tab using css.</p>
  
  <pre><code>&lt;div id="Maintabs"&gt;
    &lt;ul class"tablist"&gt;
      &lt;li&gt;&lt;a href="AshukuWeb.jsp?VIEW=Summary"  target=_top&gt;Summary&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="AshukuWeb.jsp?VIEW=Advanced" target=_top&gt;Advanced&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="AshukuWeb.jsp?VIEW=Expert" target=_top&gt;Expert&lt;/a&gt;&lt;/li&gt;
   &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>is there any way I can do this? I know css hover gives the element on which mouse is hovere, is there something similar for selected</p>
  
  <p>thanks guys,</p>
  
  <p>yes I do need dynamic handling, so I did the way you told. I capture the click event on that tab and the class. in css I apply the required styles to that class but it doesn't work.</p>
  
  <p>here is my code:</p>
  
  <p>in javaScript:</p>
  
  <pre><code>  $('#summary').click(function(){
                $(this).addClass("selected");
          alert(" summary");
            });
  </code></pre>
  
  <p>HTML code:</p>
  
  <pre><code>&lt;div id="Maintabs"&gt;
          &lt;ul&gt;
              &lt;li style="width: 100px;"&gt;&lt;a id="summary" href="AshukuWeb.jsp?VIEW=Summary"  target=_top&gt;Summary&lt;/a&gt;&lt;/li&gt;
              &lt;li style="width: 100px;"&gt;&lt;a id="advanced" href="AshukuWeb.jsp?VIEW=Advanced" target=_top&gt;Advanced&lt;/a&gt;&lt;/li&gt;
              &lt;li style="width: 100px;"&gt;&lt;a id="expert" href="AshukuWeb.jsp?VIEW=Expert" target=_top&gt;Expert&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>CSS code: </p>
  
  <pre><code>.selected{
      background-color:#FEE0C6;
  }
  </code></pre>
  
  <p>what do you think I am doing wrong??</p>