Jquery加载默认元素

嗨我试图加载页面加载默认类，我已经写了下面的代码，但需要它加载.pu1内容项在页面加载之前悬停在其他链接，然后删除一旦你将鼠标悬停在其他链接上：我迷失在如何做到这一点或寻找什么？Jquery加载默认元素

jQuery代码：

$(document).ready(function() { 
    $('.pua1').hover(function() { 
     $('.pu1').show(); 
    }, function() { 
     $(".pu1").hide(); 
    }); 
    $('.pua2').hover(function() { 
     $('.pu2').show(); 
    }, function() { 
     $(".pu2").hide(); 
    }); 
    $('.pua3').hover(function() { 
     $('.pu3').show(); 
    }, function() { 
     $(".pu3").hide(); 
    }); 
    $('.pua4').hover(function() { 
     $('.pu4').show(); 
    }, function() { 
     $(".pu4").hide(); 
    }); 
});

CSS代码：

.pua1, .pua2, .pua3, .pua4 { } 
.pu1, .pu2, .pu3, .pu4 { 
     display:none; 
}

HTML代码：

<div id="links"> 
    <a href="#" class="pua1">link one</a> 
    <a href="#" class="pua2">link two</a> 
    <a href="#" class="pua3">link three</a> 
    <a href="#" class="pua4">link four</a> 
</div> 
<div id="text"> 
    <div class="pu1"> 
     <p>text 1</p> 
    </div> 
    <div class="pu2"> 
     <p>text 2</p> 
    </div> 
    <div class="pu3"> 
     <p>text 3</p> 
    </div> 
    <div class="pu4"> 
     <p>text 4</p> 
    </div> 
</div> 
<div id="images"> 
    <div class="pu1"> 
     <img src="x/img/cut_03.jpg" width="407" height="344"> 
    </div> 
    <div class="pu2"> 
     <img src="x/img/cut_03.jpg" width="407" height="344"> 
    </div> 
    <div class="pu3"> 
     <img src="x/img/cut_03.jpg" width="407" height="344"> 
    </div> 
    <div class="pu4"> 
     <img src="x/img/cut_03.jpg" width="407" height="344"> 
    </div> 
</div>

来源

2013-02-20 user2066434

缩进请。。 – gdoron 2013-02-20 16:18:23

@gdoron已完成 – user2066434 2013-02-20 16:20:21

没有.... 。。 – gdoron 2013-02-20 16:22:09

我修改了您的html以降低Javascript复杂度。我还假定您不想在给定时间隐藏所有内容，因为您已经从.pu1开始看到它。

jsFiddle DEMO

$(document).ready(function() { 
    $('.pua').hover(function() { 
     $('.pu').hide(); 
     $('.'+$(this).attr("data-display-class")).show(); 
    }, function() { }); 

    $('.pu1').show(); 
});

HTML

<div id="links"> 
    <a href="#" data-display-class="pu1" class="pua">link one</a> 
    <a href="#" data-display-class="pu2" class="pua">link two</a> 
    <a href="#" data-display-class="pu3" class="pua">link three</a> 
    <a href="#" data-display-class="pu4" class="pua">link four</a> 
</div> 
<div id="text"> 
    <div class="pu1 pu"> 
     <p>text 1</p> 
    </div> 
    <div class="pu2 pu"> 
     <p>text 2</p> 
    </div> 
    <div class="pu3 pu"> 
     <p>text 3</p> 
    </div> 
    <div class="pu4 pu"> 
     <p>text 4</p> 
    </div> 
</div> 
<div id="images"> 
    <div class="pu1 pu"> 
     <img src="x/img/cut_03.jpg" width="407" height="344"> 
    </div> 
    <div class="pu2 pu"> 
     <img src="x/img/cut_03.jpg" width="407" height="344"> 
    </div> 
    <div class="pu3 pu"> 
     <img src="x/img/cut_03.jpg" width="407" height="344"> 
    </div> 
    <div class="pu4 pu"> 
     <img src="x/img/cut_03.jpg" width="407" height="344"> 
    </div> 
</div>

来源

2013-02-20 16:25:16

这显示了.pu1元素，但是当我悬停在其他3个链接上方之前，将鼠标悬停在链接之上时，它会保留在那里，然后在悬停在另一个链接上时悬停在另一个链接上消失.. – user2066434 2013-02-20 16:36:47

'$（'。pu'）。hide （）;''也应该隐藏'pu1' ...如果你像''div class =“pu1 pu”>'一样添加'pu'作为类。 – 2013-02-20 16:39:12

谢谢你的工作:-) – user2066434 2013-02-20 16:53:59

你有没有简单的尝试这个？

$(document).ready(function() { 
    .... 

    $('.pu1').show(); 
})

编辑：新增$('.pu').hide();所有悬停的功能和一流的pu所有股利。

<script type="text/javascript"> 
$(document).ready(function(){ 
    $('.pua1').hover(function(){ 
     $('.pu').hide(); 
     $('.pu1').show(); 
    }, function() { 
     $(".pu1").hide(); 
    }); 

    $('.pua2').hover(function(){ 
     $('.pu').hide(); 
     $('.pu2').show(); 
    }, function() { 
     $(".pu2").hide(); 
    }); 

    $('.pua3').hover(function(){ 
     $('.pu').hide(); 
     $('.pu3').show(); 
    }, function() { 
     $(".pu3").hide(); 
    }); 

    $('.pua4').hover(function(){ 
     $('.pu').hide(); 
     $('.pu4').show(); 
    }, function() { 
     $(".pu4").hide(); 
    }); 

    $('.pu1').show(); 
}); 
</script> 

<div id="links"> <a href="#" class="pua1">link one</a> 
    <a href="#" class="pua2">link two</a> 
    <a href="#" class="pua3">link three</a> 
    <a href="#" class="pua4">link four</a> 
</div> 
<div id="text"> 
    <div class="pu pu1"><p>text 1</p></div> 
    <div class="pu pu2"><p>text 2</p></div> 
    <div class="pu pu3"><p>text 3</p></div> 
    <div class="pu pu4"><p>text 4</p></div> 
</div> 
<div id="images"> 
    <div class="pu pu1"><img src="x/img/cut_03.jpg" width="407" height="344"></div> 
    <div class="pu pu2"><img src="x/img/cut_03.jpg" width="407" height="344"></div> 
    <div class="pu pu3"><img src="x/img/cut_03.jpg" width="407" height="344"></div> 
    <div class="pu pu4"><img src="x/img/cut_03.jpg" width="407" height="344"></div> 
</div>

来源

2013-02-20 16:24:04

@smokey是的，但是当您将鼠标悬停在其他链接上时.pu1内容会保留在那里敲下其他内容。 – user2066434 2013-02-20 16:26:18

编辑我的帖子。它应该工作。 – 2013-02-20 16:33:12

但Michael_B有一个更清洁的代码！ – 2013-02-20 16:35:09

尝试......

$('#links > a').on('hover', function(){ 
    var index = $(this).attr('class'); 
    $('.pu'+ index.substring(3)).show(); 
}); 

$('#links > a').on('mouseleave', function(){ 
    var index = $(this).attr('class'); 
    $('.pu'+ index.substring(3)).hide(); 
});

而且看到这个jSfiddle Example

来源

2013-02-20 16:39:07

Jquery加载默认元素

回答

相关问题