body主体内容:
<div class="wrap">
<ul id="left">
<li class="ont"><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 id="content">
<div><a href="#"><img src="images/ex6-6-2.jpg" alt=""></a></div>
<div><a href="#"><img src="images/ex6-6-3.jpg" alt=""></a></div>
<div><a href="#"><img src="images/ex6-6-4.jpg" alt=""></a></div>
<div><a href="#"><img src="images/ex6-6-5.jpg" alt=""></a></div>
<div><a href="#"><img src="images/ex6-6-6.jpg" alt=""></a></div>
</div>
</div>
CSS样式:
*{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
img{
width: 200px;
height: 250px;
}
.wrap{
width: 260px;
height: 250px;
border: 1px solid black;
box-sizing: border-box;
margin: 0px auto;
overflow: hidden;
}
#left{
float: left;
margin-right: 8px;
}
ul>li{
height: 50px;
line-height: 50px;
border: 1px solid black;
box-sizing: border-box;
border-left: none;
border-top: none;
}
li:last-child{
border-bottom: none;
}
#content{
float: left;
}
.ont{
background-color: aqua;
color: blueviolet;
}
引入 <script src="jquery.min.js"></script>
script部分
<script>
$(function(){
// (1)普通
// $("#left li").click(function(){
// //设置当前鼠标滑过的背景颜色
// $(this).addClass('ont');
// //其他按钮的背景颜色为空
// $(this).siblings('#left li').removeClass('ont');
// //获取索引号
// var ad=$(this).index();
// //当前鼠标滑过显示的图片
// $("#content div").eq(ad).show();
// //其他图片隐藏
// $("#content div").eq(ad).siblings().hide();
// })
// (2)链式编程
$("#left li").click(function(){
//设置当前鼠标点击过的背景颜色,其他按钮的背景颜色为空
$(this).addClass('ont').siblings().removeClass('ont');
//获取索引号
var ad=$(this).index();
//当前鼠标点击显示的图片,其他图片隐藏
$("#content div").eq(ad).show().siblings().hide();
})
})
效果图: