Класс не применяется в IE6 с помощью addClass ()

Question

В моем HTML есть следующий DIV, который содержит большое фоновое изображение:

<div id="widget-image" class="tyreinfo1"></div>

В зависимости от того, какое поле выбора на форме на странице выбрано, фоновое изображение будет прокручиваться в другую точку.,Эти позиции определены следующим образом:

#widget-image.tyreinfo1 { background-position: 0px -105px }
#widget-image.tyreinfo2 { background-position: 0px -210px }
#widget-image.tyreinfo3 { background-position: 0px -315px }
#widget-image.tyreinfo4 { background-position: 0px -420px }
#widget-image.tyreinfo5 { background-position: 0px -525px }

Код в полях выбора:

onfocus="$('#widget-image').removeClass().addClass('tyreinfo1');"

5 блоков выбора, каждый из которых добавляет свой класс tyreinfo.

Сюрприз, сюрприз, он не работает в IE6.Я проверил, используя панель инструментов отладки, и классы определенно применяются, однако фоновая позиция каждый раз сбрасывается до 0px 0px.

Любая помощь приветствуется!

Answer 1

сначала напишите html и css, чтобы проверить, работает ли CSS, я подозреваю, что это вызвано ошибочной реализацией CSS в IE6.

Я полагаю, что вы устанавливаете фоновое изображение на # widget-image (совершенно разумно), но IE6 будет читать '# widget-image.tyreinfo1' как '.tyreinfo1' (совершенно некорректно), что означает расположение на #widget -изображение имеет преимущество. Вы можете попробовать

#widget-image.tyreinfo1 { background-position: 0px -105px !important }

но вам может быть лучше установить стиль фона целиком для каждого класса.

Answer 2

Я согласен с @Inrbob. Сначала запишите CSS, чтобы убедиться, что он работает именно так. Затем, если это так, попробуйте это:

У вас есть право выбора? Дайте каждому выбору идентификатор. Затем прикрепите отдельный файл javascript и просто вызовите его с идентификатором.

$('#id1').click(function() {
  $('#widget-image').removeAttr('class').addClass('.whatever');
});

Вы также можете попробовать другой способ, который использует фокус ().

$('#id1').focus(function() {
  $('#widget-image').removeAttr('class').addClass('.whatever');
});

Я подозреваю, что любое решение должно работать.

Если этого не произойдет, тогда я предлагаю опубликовать весь ваш HTML и CSS с помощью http://jsfiddle.net, и пусть мы внимательно рассмотрим всю ситуацию.

Удачи.

Answer 3

Попробуйте это: вы просто указали .removeClass (), вы не указали, какой класс удалить.Я думаю, что вы пытаетесь удалить существующий класс и добавить новый класс к нему.так вот что я предлагаю.

$('#widget-image').removeAttr('class').addClass('tyreinfo1');

Answer 4

Используете ли вы PNG и скрипт исправления PNG? Если это так, фоновое позиционирование не будет работать в IE6. Вы также должны добавлять URL изображения каждый раз, когда обновляете позицию.

Answer 5

Возможно, это потому, что в вашем определении CSS отсутствует точка с запятой;

#widget-image.tyreinfo1 { background-position: 0px -105px; }

В противном случае вы можете попробовать изменить классы, изменив значение атрибута, например:

onfocus="$('#widget-image').attr('class','tyreinfo1');"

В некоторых случаях это работало для меня, когда другие методы не помогали.Но, конечно, может помочь размещение чуть большего количества примеров кода.