hello all,

using jquery to create a tabbed interface. coding is quite typical:

html:

<div id="tabbed-interface">
<ul>
<li><a href="#option1">Option1</a></li>
<li><a href="#option2">Option2</a></li>
<li><a href="#option3">Option3</a></li>
</ul>
</div>

jquery:

$(document).ready(function(){
$('#tabbed-interface li:first').addClass('active');
$('#tabbed-interface div').not(':first').hide();
$('#tabbed-interface>ul>li>a').click(function(event){
$('#tabbed-interface>ul>li').removeClass('active');
$(event.target).parent().addClass('active');
$('#tabbed-interface>div').fadeOut().filter(this.hash).fadeIn(250);
return false;});});

css:

ul li {background: #232323; list-style: none; border: 1px solid #616161; }
ul li.active {background: none; list-style: none; border: 1px solid: #616161; border-bottom: 1px solid #121212; z-index: 1; }

as you can see, all this does is add the class 'active' to the li that is clicked, and this corresponds to whether a background is shown or not. this works perfectly with text, but i am required to use non standard fonts. when i try to side step the issue using transparent .png images, it is unreliable.

For instance, changing the HTML to:

 <div id="tabbed-interface">
 <ul>
 <li><a href="#option1"><img src="option1.png" /></a></li>