Быстрое и простое изменение jquery li / div

#jquery #rollover

#jquery #ролловер

Вопрос:

просто интересно, может ли кто-нибудь помочь мне заставить этот код работать должным образом и использоваться для множественных li без объявления каждого из них отдельно. Возможно ли это? В основном я хочу выполнить опрокидывание фонового изображения с помощью < li >, а затем при наведении курсора мыши на < li> изменить содержимое #show . Имеет ли это смысл? Любые подсказки о помощи будут высоко оценены.

Код пока:

JQUERY:

 function switchTo(i) {
  $('#menu li').css({background:"url(images/1.png) no-repeat top left"}).eq(i).css({background:"url(images/1.png) no-repeat bottom left"});
  $('#show div').css('display','none').eq(i).css('display','block');
  $('#menu li').css({background:"url(images/2.png) no-repeat top left"}).eq(i).css({background:"url(images/2.png) no-repeat bottom left"});
  $('#show div').css('display','none').eq(i).css('display','block');
  $('#menu li').css({background:"url(images/3.png) no-repeat top left"}).eq(i).css({background:"url(images/3.png) no-repeat bottom left"});
  $('#show div').css('display','none').eq(i).css('display','block');
  $('#menu li').css({background:"url(images/4.png) no-repeat top left"}).eq(i).css({background:"url(images/4.png) no-repeat bottom left"});
  $('#show div').css('display','none').eq(i).css('display','block');
}
$(document).ready(function(){
  $('#menu li').mouseover(function(event){
    switchTo($('#menu li').index(event.target));
  });
  switchTo(0);
});

HTML:

 <ul id="menu">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>
<div id="show">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

Еще раз спасибо.

Ответ №1:

Похоже, вы просто пытаетесь имитировать :hover класс CSS:

 #menu li.one:hover {
    background: url(images/1.png) no-repeat top left;
}

/* etc. */

Что касается отображения содержимого с соответствующим битом div, немного изменив ваш HTML:

 <ul id="menu">
  <li class="one"><div>1</div></li>
  <li class="two"><div>2</div></li>
  <li class="three"><div>3</div></li>
  <li class="four"><div>4</div></li>
</ul>

И добавление еще немного CSS:

 #menu li div {
   display: none;
}    

#menu li:hover div {
   display: block;
}

Рабочий пример здесь

1. Ты легенда. Использует ли это левое поле, чтобы компенсировать хорошую практику divs? Пример: jsfiddle.net/yL4hx/1

2. Как бы вы удержали эффект наведения от прыжков вниз и отображали числа сбоку в том же положении? jsfiddle.net/yL4hx/19

3. Если вы хотите, чтобы div всегда был на 200 пикселей левее #menu li ‘s, то это отличная практика.

4. Я не уверен, что понимаю, что вы имеете в виду. Вы хотите, чтобы цифры всегда отображались в одной и той же позиции при наведении курсора мыши на li?

5. Да. Допустим, я заменяю числа изображением. Я хочу, чтобы для соответствующего li отображалось только одно изображение. Имеет ли это смысл? Я думаю, вы могли бы разместить все div друг над другом или есть способ, которым вы можете просто использовать один div, в котором отображается каждое из чисел?

Ответ №2:

Я не думаю, что JavaScript вообще здесь необходим, выглядит немного накладно.

Почему бы вам просто не использовать li: hover и не сделать все это в CSS? Вы можете просто иметь background-image: … в классе:hover, и это в значительной степени так. То же самое для divs.