Интерфейсы с вкладками 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 - это флэш-подход.
• cufon использует комбинацию SVG и JavaScript для визуализации текста.
• CSS3 шрифт замена - это чистый CSS-подход к замене шрифтов, и есть число из статей , объясняющих, как его реализовать кросс-браузер .

Каждый подход не лишен недостатков (например, cufon затрудняет копирование и вставку текста заголовка), но в конечном итоге все они являются лучшей альтернативойк работе со статическими изображениями.