jquery tabbed interface breaks when using images
- by Steve
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>
