前端开发 选项卡插件

 如图像所示：点哪就出现哪一块

 

适用dom结构：

<div id="aaa"

        <ul class="header">

                <li></li>    //省略，自行插入li

        </ul>

        <ul class="box">

                <li></li>    //省略，自行插入li

        </ul> 

    </div

css样式：

* {

    margin: 0;

    padding: 0;

}

ul {

    list-style: none;

}

.header {

    display: flex;

    width: 500px;

}

.header li {

    flex: 1;

    height: 50px;

    line-height: 50px;

    text-align: center;

    border: 1px solid black;

}

.box {

    position: relative;

}

.box li {

    position: absolute;

    left: 0;

    top: 0;

    width: 500px;

    height: 200px;

    background-color: yellow;

    display: none;

}

.header .active {

    background-color: red;

}

.box .active {

    display: block;

}

js代码：

$.fn.extend({

    tabs:function(index){

        var oli = this.find(".header li")

        var obox = this.find(".box li")

        oli.eq(index).addClass("active")

        obox.eq(index).addClass("active")

        oli.click(function(){

            $(this).addClass("active").siblings().removeClass("active")

            var index = $(this).index()

            obox.removeClass("active").eq(index).addClass("active")

        })

    }

})

最后再在html页调用$().tabs()