Question

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

E.G。

我有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将变为可变。我希望你有我的观点。

如果有人愿意提供帮助，我创建了fiddle。

Answer 1

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

<强> jsFiddle example

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>

鼠标悬停时jQuery交换div

2 个答案: