Question

只是想知道是否有人可以帮助我使这段代码正常工作并用于多种语言，而无需单独声明每一个。这可能吗？基本上想用＆lt;做背景图像翻转li>然后当盘旋在＆lt; 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>

再次感谢。

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

工作示例here

Answer 2

我认为这里一般不需要JavaScript，看起来有点开销。

为什么不选择li：hover并在CSS中完成所有操作？你可以在：hover类中简单地使用background-image：...，这就是它。 div也一样。

快速简便的jquery li / div更改

2 个答案: