选项卡插件

/*
使用说明
一：调用方式 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;

}