選項卡切換

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