选项卡切换

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