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

Question

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

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

正如您所看到的，所有这些操作都是将“active”类添加到所单击的li中，这与是否显示背景相对应。这可以很好地处理文本，但我需要使用非标准字体。当我试图使用透明的.png图像来回避这个问题时，它是不可靠的。

例如，将HTML更改为：

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

Answer 1

如果你的目标是使用非标准字体，我会避免使用内联图片。网络已经走了很长一段路，有许多不那么脆弱和引人注目的解决方案可供你使用。

目前有三种技术(据我所知)可以将浏览器字体替换为您选择的字体：

• sIFR是一种基于approach.
• cufon的text.
• CSS3 font，它使用SVG和CSS的组合来渲染cross-browser.

替换字体是一种纯JavaScript的方法，并且有a number of articles解释了如何实现它

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