dynamically highlighting a tab using css - html

Question

I have the following code and I want to highlight the currently selected tab using css.
<div id="Maintabs">
<ul class"tablist">
<li><a href="AshukuWeb.jsp?VIEW=Summary" target=_top>Summary</a></li>
<li><a href="AshukuWeb.jsp?VIEW=Advanced" target=_top>Advanced</a></li>
<li><a href="AshukuWeb.jsp?VIEW=Expert" target=_top>Expert</a></li>
</ul>
</div>
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
thanks guys,
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.
here is my code:
in javaScript:
$('#summary').click(function(){
$(this).addClass("selected");
alert(" summary");
});
HTML code:
<div id="Maintabs">
<ul>
<li style="width: 100px;"><a id="summary" href="AshukuWeb.jsp?VIEW=Summary" target=_top>Summary</a></li>
<li style="width: 100px;"><a id="advanced" href="AshukuWeb.jsp?VIEW=Advanced" target=_top>Advanced</a></li>
<li style="width: 100px;"><a id="expert" href="AshukuWeb.jsp?VIEW=Expert" target=_top>Expert</a></li>
</ul>
</div>
CSS code:
.selected{
background-color:#FEE0C6;
}
what do you think I am doing wrong??

Answer 1

I'm not sure how you are using pure CSS to produce a tab effect. You would normally need Javascript or jQuery to dynamically change what the current tab is.
However, if you are using Javascript or jQuery for the tab effect, you could simply add a class to highlight the selected tab.
For example, this could be your jQuery:
$("#tab1").addClass("selected-tab");
And this your CSS:
.selected-tab
{
/*Some style to highlight it and show it's the selected tab*/
}

Answer 2

You're going to want to make an active class. By giving your li the defined class active. Then you can use css to make the .active a different color, size, shape, etc
Here's an example (first li):
HTML
<div id="Maintabs">
<ul class"tablist">
<li class="active"><a href="AshukuWeb.jsp?VIEW=Summary" target=_top>Summary</a></li>
<li><a href="AshukuWeb.jsp?VIEW=Advanced" target=_top>Advanced</a></li>
<li><a href="AshukuWeb.jsp?VIEW=Expert" target=_top>Expert</a></li>
</ul>
</div>
Here's an example (second li):
HTML
<div id="Maintabs">
<ul class"tablist">
<li><a href="AshukuWeb.jsp?VIEW=Summary" target=_top>Summary</a></li>
<li class="active"><a href="AshukuWeb.jsp?VIEW=Advanced" target=_top>Advanced</a></li>
<li><a href="AshukuWeb.jsp?VIEW=Expert" target=_top>Expert</a></li>
</ul>
</div>
Here's an example (third li):
HTML
<div id="Maintabs"> <ul class"tablist">
<li><a href="AshukuWeb.jsp?VIEW=Summary" target=_top>Summary</a></li>
<li><a href="AshukuWeb.jsp?VIEW=Advanced" target=_top>Advanced</a></li>
<li class="active"><a href="AshukuWeb.jsp?VIEW=Expert" target=_top>Expert</a></li>
</ul>
</div>
CSS
#maintabs.active {background-color: #000;}
#maintabs {background-color: #ccc;}
The result will be the active tab being black (#000), and the inactive tabs being light grey (#ccc)