I have css hover over
images for my tabs and I'm trying to get the class to change from .how to .how_on when I click on the image HOW.
My tabs are
HOW | WHAT | WHEN | WHO | WHY
I have classes for each (.how, .how_on), (.what, .what_on), etc...
Can I make jQuery add _on to the original class name using click(function(){}); ?
HTML:
<div id="tab_container">
<ul class="tabs">
<li><a class="how_on" href="#how">How</a></li>
<li><a class="why" href="#why">Why</a></li>
<li><a class="what" href="#what">What</a></li>
<li><a class="who" href="#who">Who</a></li>
<li><a class="when" href="#when">When</a></li>
</ul>
<p><img src="images/tab_top.jpg" width="864px" height="6px" alt="" border="0" /></p>
</div>
<div class="tab_body">
<!-- HOW -->
<div id="how" class="tab">
<strong>HOW IT WORKS:</strong>
</div>
JQUERY:
<script type="text/javascript">
jQuery(document).ready(function(){
//if this is not the first tab, hide it
jQuery(".tab:not(:first)").hide();
//to fix u know who
jQuery(".tab:first").show();
//when we click one of the tabs
jQuery(".tabs a").click(function(){
//get the ID of the element we need to show
stringref = jQuery(this).attr("href").split('#')[1];
// adjust css on tabs to show active tab
//hide the tabs that doesn't match the ID
jQuery('.tab:not(#'+stringref+')').hide();
//fix
if (jQuery.browser.msie && jQuery.browser.version.substr(0,3) == "6.0") {
jQuery('.tab#' + stringref).show();
}
else
//display our tab fading it in
jQuery('.tab#' + stringref).fadeIn();
//stay with me
return false;
});
});
</script>
