jquery - 鼠标悬停时jQuery交换div

Question

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

例如

我有 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 可以隐藏。然后，如果用户“悬停”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

在 CSS 中将 .container 设置为 display: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>