Toggle div's on hover

2019-02-16 01:50发布

站内问答 / jQuery
343 6 2

I have a test UL list that goes like this:

<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 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 :\

6条回答
欢心
2楼-- · 2019-02-16 02:38

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:

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:

$('ul li').on({
    'mouseenter':function(){
        $('#'+$(this).data('id')).fadeIn();
    },'mouseleave':function(){
        $('#'+$(this).data('id')).fadeOut();
    }
});

JSFiddle

查看更多
0人赞 添加讨论(0) 举报
啃猪蹄的小仙女
3楼-- · 2019-02-16 02:40

Try this.

html code

<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.

$(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

查看更多
0人赞 添加讨论(0) 举报
姐就是有狂的资本
4楼-- · 2019-02-16 02:42

Please see this fiddle.

Also keep ID's unique.

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();
    });
});
查看更多
0人赞 添加讨论(0) 举报
姐就是有狂的资本
5楼-- · 2019-02-16 02:45

You should give unique id's to elements

<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();
});

Demo

查看更多
0人赞 添加讨论(0) 举报
闹够了就滚
6楼-- · 2019-02-16 02:45

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

查看更多
0人赞 添加讨论(0) 举报
ら.Afraid
7楼-- · 2019-02-16 02:53

Chang your id to class 

<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();
})

Fiddle Demo

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(2)