html代码:
<div class="box clearfix">
<div class="box1">
<ul>
<li class="on"><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 class="box2">
<img src="/content/subject/练习/images/lc01.jpg" alt="">
<img src="/content/subject/练习/images/lc02.jpg" alt="">
<img src="/content/subject/练习/images/lc03.jpg" alt="">
<img src="/content/subject/练习/images/lc04.jpg" alt="">
<img src="/content/subject/练习/images/lc05.jpg" alt="">
</div>
</div>
css代码(引入重置css文件的css):
.box1{float:left;}
.box1 li{height: 20px;padding:10px;background: pink;width: 50px;border-bottom: 1px solid #fff;}
.box2{height: 202px;width: 200px;border:1px solid red;float: left;overflow: hidden;}
.box1 .on{background:yellow}
js代码:
$(function(){
table();
function table(){
var box=$(".box");
box.children(".box1").on("mouseover","li",function(){
var o=$(this);
var op=o.parents(".box1");
var os=o.siblings("li");
var index=o.index();
os.removeClass('on');
o.addClass('on');
var iteams=op.siblings(".box2").children("img");
iteams.hide();
iteams.eq(index).show();
});
}
});