Быстрая и простая смена jquery li / div - PullRequest
Новая
       3

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

1 голос
/ 29 октября 2011

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

, тогда при наведении курсора на содержимое #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>

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

Ответы [ 2 ]

1 голос
/ 29 октября 2011

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

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

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

0 голосов
/ 29 октября 2011

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

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

...