jQuery 在悬停时切换 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22225782/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Toggle div's on hover
提问by Mariola
I have a test UL list that goes like this:
我有一个测试 UL 列表，如下所示：
<ul>
<li id="firstdiv">First div</li>
<li id="seconddiv">Second div</li>
<li id="thirddiv">Third div</li>
....
</ul>
And, bellow that i have related div's, aka:
而且，在下面我有相关的 div，又名：
<div id="firstdiv">Content Here</div>
<div id="seconddiv">Content Here</div>
<div id="thirddiv">Content Here</div>
I was wondering how could i make each div only shows when its LI item is hovered, maybe with some fadein effect. I tried with some other answers from here, but no luck :\
我想知道如何让每个 div 只在其 LI 项目悬停时显示，也许有一些淡入淡出效果。我从这里尝试了其他一些答案，但没有运气：\
回答by George
As I've mentioned, it is important that your ids are unique. So you need to find another way to reference your <div>s. May I suggest using data-*attributes:
正如我所提到的，重要的是您的ids 是独一无二的。所以你需要找到另一种方式来引用你的<div>s。我可以建议使用data-*属性：
HTML
HTML
<ul>
<li data-id="firstdiv">First div</li>
<li data-id="seconddiv">Second div</li>
<li data-id="thirddiv">Third div</li>
</ul>
Then your jQuery could look something like the following:
那么您的 jQuery 可能如下所示：
$('ul li').on({
'mouseenter':function(){
$('#'+$(this).data('id')).fadeIn();
},'mouseleave':function(){
$('#'+$(this).data('id')).fadeOut();
}
});
回答by JF it
Please see this fiddle.
请看这个小提琴。
Also keep ID's unique.
还要保持 ID 的唯一性。
Here's some code from the fiddle:
这是小提琴中的一些代码：
$(document).ready(function() {
$('ul>li').hover(function(){
$('#d'+$(this).prop('id')).show();
}, function() {
$('#d'+$(this).prop('id')).hide();
});
});
回答by i'm PosSible
Try this.
尝试这个。
html code
html代码
<ul>
<li id="firstli">First div</li>
<li id="secondli">Second div</li>
<li id="thirdli">Third div</li>
</ul>
<div id="firstdiv">Content Here</div>
<div id="seconddiv">Content Here</div>
<div id="thirddiv">Content Here</div>
javascript.
javascript。
$(document).ready(function(){
$("#firstdiv").hide();
$("#seconddiv").hide();
$("#thirddiv").hide();
$("#firstli").hover(function(){
$("#firstdiv").show();
});
$("#secondli").hover(function(){
$("#seconddiv").show();
});
$("#thirdli").hover(function(){
$("#thirddiv").show();
});
});
see output:fiddle demo
见输出：fiddle demo
回答by Felix
Chang your id to class
将您的 ID 更改为班级
<ul>
<li class="firstdiv">First div</li>
<li class="seconddiv">Second div</li>
<li class="thirddiv">Third div</li>
</ul>
<div class="firstdiv">Content 1 Here</div>
<div class="seconddiv">Content 2 Here</div>
<div class="thirddiv">Content 3 Here</div>
then you can use:
那么你可以使用：
$('ul li').hover(function() {
var cls = $(this).attr('class');
$('div.'+cls).toggle();
})
回答by Anoop Joshi
You should give unique id's to elements
您应该为元素提供唯一的 id
<ul>
<li id="firstdiv">First div</li>
<li id="seconddiv">Second div</li>
<li id="thirddiv">Third div</li>
</ul>
<div class="myclass" id="firstdiv1">Content1 Here</div>
<div class="myclass" id="seconddiv1">Content2 Here</div>
<div class="myclass" id="thirddiv1">Content3 Here</div>
$(".myclass").hide();
$("ul li").hover(function(){
$(".myclass").hide();
$("#"+this.id+1).show();
});
回答by Mohammad Kermani
This is your answer
这是你的答案
<html>
<head>
<style>
.hidden_div{
display: none;
position: absolute;
}
</style>
<script src="script/jquery-1.10.2.js"></script>
<script>
$(document).ready(function(){
$("li").mouseover(function(){
var id=$(this).attr('id');
$('.hidden_div').fadeOut();
$("."+id).fadeIn();
})
});
</script>
</head>
<body>
<ul>
<li id="firstdiv">First div</li>
<li id="seconddiv">Second div</li>
<li id="thirddiv">Third div</li>
</ul>
<div class="firstdiv hidden_div">Content 1</div>
<div class="seconddiv hidden_div">Content 2</div>
<div class="thirddiv hidden_div">Content 3</div>
</body>
</html>
just change the location of your script
只需更改脚本的位置
