• Cont1
  • Cont2
  • Cont3
  • Cont1
  • Cont2
  • Cont3
引入4个文件
<script src="YIQI-UI/jquery-2.1.1.min.js"></script>
<link href="YIQI-UI/YIQI-UI.css" rel=stylesheet>

<link type="text/css" href="plus/tab/js_tab.css" rel="stylesheet" />
<script src="plus/tab/js_tab.js"></script>

<div class="mt-tabpage" js-tab="2">
    <div class="mt-tabpage-title">
        <a href="javascript:;" class="mt-tabpage-item mt-tabpage-item-cur">公告</a>
        <a href="javascript:;" class="mt-tabpage-item">决定</a>
        <a href="javascript:;" class="mt-tabpage-item">会议</a>
    </div>
    <div class="mt-tabpage-count">
        <ul class="mt-tabpage-cont__wrap">
            <li class="mt-tabpage-item">Cont1</li>
            <li class="mt-tabpage-item">Cont2</li>
            <li class="mt-tabpage-item">Cont3</li>
        </ul>
    </div>
</div>

<div class="mt-tabpage" js-tab="3">
    <div class="mt-tabpage-title">
        <a href="javascript:;" class="mt-tabpage-item mt-tabpage-item-cur">公告</a>
        <a href="javascript:;" class="mt-tabpage-item">决定</a>
        <a href="javascript:;" class="mt-tabpage-item">会议</a>
    </div>
    <div class="mt-tabpage-count">
        <ul class="mt-tabpage-cont__wrap">
            <li class="mt-tabpage-item">Cont1</li>
            <li class="mt-tabpage-item">Cont2</li>
            <li class="mt-tabpage-item">Cont3</li>
        </ul>
    </div>
</div>

<script type="text/javascript">
$(function () {

    $('[js-tab=2]').tab({
        mouse: 'over',   //切换方式:over,click
        autoPlay: true,  //播放方式:false,true
        curDisplay: 1,     //当前第一个打开
        changeMethod: 'horizontal'  //切换选项:默认default,horizontal,vertical,opacity这4种方式
    });

    $('[js-tab=3]').tab({
        curDisplay: 2,
        changeMethod: 'horizontal'
    });
    
});
</script>