jQuery将div切换到鼠标上

有人知道一个简单的jquery脚本，可以在悬停时切换/更改div吗？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是vissible，想和＃container2的，＃ container3隐藏。然后，如果用户“HOVER”link2或link3＃container1被隐藏，并且＃container2或＃container3将变得易用。我希望你有我的观点。如果有人想帮忙，我创建了fiddle。

来源

2013-04-07 AndrewS

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

jsFiddle example

来源

2013-04-07 15:27:34 j08691

非常好！谢谢！ – AndrewS 2013-04-07 15:29:50

+1与我的类似，唯一不同的是，.hide可能会因为很多div而变得丑陋，可能希望将它放在.each中？ – 2013-04-07 15:36:03

@RickCalder - Nah，我会将div分配给一个类。更容易。 – j08691 2013-04-07 15:39:07

设置.container到显示：无在CSS

小提琴：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>

来源

2013-04-07 15:34:17

jQuery将div切换到鼠标上

回答

相关问题