使用图像时，jquery选项卡式界面中断

使用jquery创建选项卡式界面。编码非常典型：

html:

css:

如您所见，所有这些操作都是将类“active”添加到单击的li中，这与是否显示背景相对应。这非常适合文本，但我必须使用非标准字体。当我试图用透明的.png图像回避这个问题时，这是不可靠的

例如，将HTML更改为：

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

如果你的目标是使用非标准字体，我会避免使用内联图像。网络已经走过了漫长的道路，有许多不那么脆弱和突兀的解决方案可供您使用

目前有三种技术（我知道）可以用您选择的字体替换浏览器字体：

• 是一种基于flash的方法
• 使用SVG和JavaScript的组合来呈现文本
• 替换是一种纯粹的CSS方法来替换字体，有很多方法可以解释如何实现它

---

每种方法都有其缺点（例如，cufon使复制粘贴标题文本变得困难），但最终它们都是处理静态图像的更好选择。

嘿，谢谢你的建议。最初打算使用sIFR，但经过一些复杂化后，被指示使用图像。该项目即将完成，因此，如果可能的话，我们更愿意使用图像解决这一遗留问题。

$(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;});});

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; }

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