我有以下jquery代码.
基本上我将有几个重叠的div和所有重叠div的右边的链接列表.当悬停在链接上时,链接的指定div将淡入.
我有以下代码,它可以工作(它使用默认窗口的示例图片),但如果有人可以想出一种方法来优化它或使其通用,我会很感激.
<html>
<head>
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#trigger1").mouseover(function() {
$(".contentdiv").addClass("inactive");
$("#divsunset").removeClass("inactive");
$(".inactive").fadeOut(500);
$("#divsunset").fadeIn(500);
});
$("#trigger2").mouseover(function() {
$(".contentdiv").addClass("inactive");
$("#divwinter").removeClass("inactive");
$(".inactive").fadeOut(500);
$("#divwinter").fadeIn(500);
});
$("#trigger3").mouseover(function() {
$(".contentdiv").addClass("inactive");
$("#divbh").removeClass("inactive");
$(".inactive").fadeOut(500);
$("#divbh").fadeIn(500);
});
$("#trigger4").mouseover(function() {
$(".contentdiv").addClass("inactive");
$("#divwl").removeClass("inactive");
$(".inactive").fadeOut(500);
$("#divwl").fadeIn(500);
});
});
</script>
<style>
#divsunset
{
position: absolute;
top: 5px;
left: 5px;
}
#divwinter
{
position: absolute;
top: 5px;
left: 5px;
}
#divbh
{
position: absolute;
top: 5px;
left: 5px;
}
#divwl
{
position: absolute;
top: 5px;
left: 5px;
}
#links
{
position: absolute;
top: 800px;
left: 700px;
}
.inactive
{
}
</style>
</head>
<body>
<div id="divsunset" class="contentdiv">
<img src="Sunset.jpg" />
</div>
<div id="divwinter" class="contentdiv">
<img src="Winter.jpg" />
</div>
<div id="divbh" class="contentdiv">
<img src="bh.jpg" />
</div>
<div id="divwl" class="contentdiv">
<img src="wl.jpg" />
</div>
<br />
<div id="links">
<a href="#" id="trigger1">Show Sunset</a>
<a href="#" id="trigger2">Show Winter</a>
<a href="#" id="trigger3">Show Blue Hills</a>
<a href="#" id="trigger4">Show Waterlillies</a>
</div>
</body>
</html>
<html>
<head>
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#trigger1").mouseover(function() {
$(".contentdiv").addClass("inactive");
$("#divsunset").removeClass("inactive");
$(".inactive").fadeOut(500);
$("#divsunset").fadeIn(500);
});
$("#trigger2").mouseover(function() {
$(".contentdiv").addClass("inactive");
$("#divwinter").removeClass("inactive");
$(".inactive").fadeOut(500);
$("#divwinter").fadeIn(500);
});
$("#trigger3").mouseover(function() {
$(".contentdiv").addClass("inactive");
$("#divbh").removeClass("inactive");
$(".inactive").fadeOut(500);
$("#divbh").fadeIn(500);
});
$("#trigger4").mouseover(function() {
$(".contentdiv").addClass("inactive");
$("#divwl").removeClass("inactive");
$(".inactive").fadeOut(500);
$("#divwl").fadeIn(500);
});
});
</script>
<style>
#divsunset
{
position: absolute;
top: 5px;
left: 5px;
}
#divwinter
{
position: absolute;
top: 5px;
left: 5px;
}
#divbh
{
position: absolute;
top: 5px;
left: 5px;
}
#divwl
{
position: absolute;
top: 5px;
left: 5px;
}
#links
{
position: absolute;
top: 800px;
left: 700px;
}
.inactive
{
}
</style>
</head>
<body>
<div id="divsunset" class="contentdiv">
<img src="Sunset.jpg" />
</div>
<div id="divwinter" class="contentdiv">
<img src="Winter.jpg" />
</div>
<div id="divbh" class="contentdiv">
<img src="bh.jpg" />
</div>
<div id="divwl" class="contentdiv">
<img src="wl.jpg" />
</div>
<br />
<div id="links">
<a href="#" id="trigger1">Show Sunset</a>
<a href="#" id="trigger2">Show Winter</a>
<a href="#" id="trigger3">Show Blue Hills</a>
<a href="#" id="trigger4">Show Waterlillies</a>
</div>
</body>
</html>
谢谢Matt,TM和kRON,你的回答真的很有帮助.
我不觉得我完全解释了自己,但是TM提供了我正在寻找的答案.
我想跟随DRY,这次提供的代码TM帮助我最好,因为它不需要我改变我的标记,只需要jQuery代码.
再次,非常感谢.令我惊讶的是,我得到了答案.保持伟大的工作.
你可以做的第一件事就是把它变得更干净,用更通用的东西替换所有那些类似的调用.
(注意:假设所有这些都在里面document.ready())
$('#trigger1').data('target', '#divsunset');
$('#trigger2').data('target', '#divwinter');
$('#trigger3').data('target', '#divbh');
$('#trigger4').data('target', '#divwl');
$('#trigger1,#trigger2,#trigger3,#trigger4').mouseover(function() {
var selector = $(this).data('target');
$(".contentdiv").addClass("inactive");
$(selector).removeClass("inactive");
$(".inactive").fadeOut(500);
$(selector).fadeIn(500);
});
使用逗号分隔的选择器是使用jQuery服从DRY的好方法.
我$(element).data()用来设置和检索元素上的一些数据,在这种情况下,用于更新相应元素的选择器.
此外,只是为了更清晰的视觉效果$(document).ready(),如果您愿意,可以使用以下代码.这是完全相同的事情,只是一种不同的语法.
$(function() {
//DOM ready
};
| 归档时间： |
|
| 查看次数： |
8411 次 |
| 最近记录： |