西游记案例(排他思想+链式编程)
想实现鼠标经过西游记里的谁就显示谁,应该怎么办呢?
那就得用到昨天说的排他思想了,干掉所有人,设置我自己,先将所有人全设置为"",然后再设置当前的值。
代码:
链式编程-西游记
#nav{float: left;}
ul li {list-style: none;}
ul{display: block;}
a{text-decoration: none;display: block;}
#content{float: left;border: 1px solid pink; width: 560px; height: 616px;}
$(function(){
//开始载入时,只是显示第一个元素,其余隐蔽(排他思想)
$('#content div').eq(0).show().siblings().hide();
//鼠标经过左侧的小li事件(隐式迭代)
$('#list li').mouseover(function(event){
//得到当前小li的索引号
var ind = $(this).index();
console.log(ind);
//让右侧盒子中相应索引号的图片显示,其它图片隐藏
$('#content div').eq(ind).show().siblings().hide();
//单前小li背景改变,其它背景清除
$(this).css('background','pink').siblings().css('background','');
});
});
运行结果:
引入的图片如下:




