鼠标悬停时jQuery交换div

Question

有人知道一个简单的jquery脚本，可以在悬停时交换/更改div吗？

例如

我有3个li元素：

<ul>
   <li><a href="#" id="link1">Link1</a></li>
   <li><a href="#" id="link2">Link2</a></li>
   <li><a href="#" id="link3">Link3</a></li>
</ul>

并且有3个DIV容器：

<div id="container1">content 1</div>
<div id="container2">content 2</div>
<div id="container3">content 3</div>

所以，我希望当页面打开DIV＃container1为可变，而＃container2，＃container3为bi隐藏。 然后，如果用户“HOVER”link2或link3＃container1被隐藏，＃container2或＃container3将变为可变。 我希望你有我的观点。

如果有人愿意提供帮助，我就创造了一个小提琴 。

Answer 1

$('#container2, #container3').hide();
$('li a').mouseover(function(){
    var idx= $(this).attr('id').substr(-1);
    $('#container1, #container2, #container3').hide();
    $('#container'+idx).show();
});

jsFiddle例子

Answer 2

将.container设置为在CSS中显示：none

小提琴： http ： //jsfiddle.net/calder12/nVx7a/14/

jQuery的：

$(".link").hover(function(){
   var whichOne = $(this).attr("id").substring(4);
    $(".container").each(function(){
   if($(this).attr("id")=="container"+whichOne)
   {   
       $(this).show();
   } else {
       $(this).hide();
   }
    });
});

HTML：

<ul>
       <li><a href="#" id="link1" class="link">Link1</a></li>
       <li><a href="#" id="link2" class="link">Link2</a></li>
       <li><a href="#" id="link3" class="link">Link3</a></li>
</ul>

<div id="container1" class="container">content 1</div>
<div id="container2" class="container">content 2</div>
<div id="container3" class="container">content 3</div>