<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>

.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}

$(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();        });    }});