頁籤插件

/*

使用說明

一：調用方式 new tableBox(".tableBox", “hover”,100);

new tableBox(“最外層class或id”,“導航頭class名”",延時器響應時間);

二：頁籤體結構

<div class="tableBox">
    <ul>
        <li>導航頭1</li>
        <li>導航頭2</li>
        <li>導航頭3</li>
    </ul>
    <ol>
        <li>
            内容一
        </li>
        <li>
            内容二
        </li>
        <li>
            内容三
        </li>
    </ol>
</div>
           

三：注意事項

1.頁籤大體結構不可改變

2.導航頭和内容數量必須保持一緻

3.基于jquery2.1.4版本

4.面向對象方式

*/

函數如下:

function tableBox(elem, elemClass,dateTime) {
    this.init(elem, elemClass,dateTime);
}
$.extend(tableBox.prototype, {
    init: function (elem, elemClass,dateTime) {//初始化
        this.ul = $(elem).children().eq(0);//找到頁籤的導航頭
        this.ol = $(elem).children().eq(1);//找到頁籤的導航頭
        this.handleEvent(elemClass,dateTime);
    },
    handleEvent: function (elemClass,dateTime) {//綁定事件
        $(this.ul).children("li:first").addClass(elemClass);
        $(this.ol).children("li:first").show().siblings().hide();
        for (let i = 0; i < $(this.ul).children().length; i++) {
            $(this.ul).children().eq(i).on("mouseenter", function () {
                $(this.ul).children().eq(i).addClass(elemClass).siblings().removeClass(elemClass);
                setTimeout(function () {
                    $(this.ol).children().eq(i).show().siblings().hide();
                }.bind(this), dateTime)
            }.bind(this))
        }
    }
})
new tableBox(".tableBox", "hover",100);
           

ps:附帶簡易結構樣式

html

<div class="tableBox">
   <ul>
       <li>tab1</li>
       <li>tab2</li>
       <li>tab3</li>
   </ul>
   <ol>
       <li>
           <img src="https://ss0.baidu.com/7Po3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=45e1c8e71ddfa9ece22e501752d1f754/342ac65c103853434cc02dda9f13b07eca80883a.jpg"
           />
       </li>
       <li>
           <img src="https://ss3.baidu.com/9fo3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=2512fa1075310a55db24d8f487444387/09fa513d269759eeef490028befb43166d22df3c.jpg"
           />
       </li>
       <li>
           <img src="https://ss1.baidu.com/-4o3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=8b046e1e0646f21fd6345853c6266b31/8c1001e93901213fe4c06e3958e736d12e2e9567.jpg"
           />
       </li>
   </ol>
</div>
           

css(可根據實際情況更改樣式)

ul,
ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

ul {
    width: 500px;
    height: 26px;
}

ul li {
    float: left;
    height: 26px;
    padding: 0 16px;
    cursor: pointer;
}

ol {
    width: 488px;
    padding: 6px;
    background: #abcdef;
}

.hide {
    display: none;
}

.show {
    display: block;
}

.normal {
    color: black;
    background: #ddd;
    border: 1px solid #abcdef;
    border-bottom: 0;
}

.hover {
    color: #fff;
    background: #abcdef;
    border: 1px solid #abcdef;
    border-bottom: 0;

}