题
我有以下jQuery代码。
基本上我将有几个重叠的div和对所有那些重叠的div右侧链接列表。悬停在一个链路时,链路的分配的div会褪色英寸
我有下面的代码和它的作品(它使用默认的Windows的样品图片),但如果有人能想办法优化它或使它通用,我将不胜感激。
<html>
<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>
结果
显示日落 冬季展 显示蓝山 显示Waterlillies
感谢您马特,TM和克朗,你的反应确实帮助。
我不觉得我完全解释自己,但TM提供我一直在寻找的答案。
我想跟着干,所提供的代码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);
});
使用逗号分隔的选择器是服从DRY与jQuery的好方法。
我用$(element).data()
设置和检索的元件上的一些数据,在这种情况下,该选择器用于更新相应的元件。
此外,仅仅是一个更清洁的视觉外观,可以使用以下的$(document).ready()
的地方,如果你喜欢它。这是完全一样的东西,只是不同的语法。
$(function() {
//DOM ready
};
其他提示
我在几个月前回答过类似的问题 jQuery的交换来实现要素中是否有帮助。
马特
Clarrification,在那里我有{ID:“1”}你应该在你要显示,并在其他分区的一个泛型类的名称隐藏起来的div ID交换
。Remeber可应用于多张类的元素:
<Div class="name1 name2"></div>
如果您有连接到原来的div样式规则可能有所帮助。
这是很好的,但你需要一个更通用的方法来你分配的ID。
这想到的最快的解决办法是包裹起来的是淡入下一个父格“#wrapped”重叠的div。采取的所有链接,并为它们分配CSS类“触发器名”,其中“NAME”是“夕阳‘冬天’,等等,那么你可以这样做:
$(document).ready(function() {
$(".trigger").mouseover(function() {
$(".contentdiv").addClass("inactive");
$("#wrapper ." + $(this).attr('class')[1]).removeClass("inactive");
$(".inactive").fadeOut(500);
$("#wrapper ." + $(this).attr('class')[1]).fadeIn(500);
});
这可能不是最好的解决方案,但希望它给你的想法。