西游记案例(排他思想+链式编程)
想实现鼠标经过西游记里的谁就显示谁,应该怎么办呢？
那就得用到昨天说的排他思想了，干掉所有人，设置我自己，先将所有人全设置为"",然后再设置当前的值。
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>链式编程-西游记</title>
<script type="text/javascript" src="../Js/jquery-3.6.0.js" ></script>
<style type="text/css">
#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;}
</style>
<hr />
</head>
<body>
<div class="wrapper">
<div id="nav">
<ul id="list">
<li><a href="#">唐僧</a></li>
<li><a href="#">孙悟空</a></li>
<li><a href="#">猪八戒</a></li>
<li><a href="#">沙悟净</a></li>
<li><a href="#">三兄弟</a></li>
</ul>
</div>
<div id="content">
<div><a href="#"><img src="../img/560%20616/TS.png" alt="唐僧" width="560" height="616"></a></div>
<div><a href="#"><img src="../img/560%20616/SWK.png" alt="孙悟空" width="560" height="616"></a></div>
<div><a href="#"><img src="../img/560%20616/ZBJ.png" alt="猪八戒" width="560" height="616"></a></div>
<div><a href="#"><img src="../img/560%20616/SWJ.png" alt="沙悟净" width="560" height="616"></a></div>
<div><a href="#"><img src="../img/560%20616/SXD.png" alt="三兄弟" width="560" height="616"></a></div>
</div>
</div>
<script type="text/javascript">
$(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','');
});
});
</script>
</body>
</html>
运行结果:
引入的图片如下:
