额，关于Tab切换，网上代码一大堆。硬生地直接在HTML结构中嵌入事件代码，个人感觉实在不爽，习惯了jQuery插件的配置方式，即使原生的JS代码也应该写的优雅一些。

这个组件，HTML结构有些要求。基本的HTML结构如下。

<div id="tab-switch">
    <ul class="tabs">
        <li><a href="#">Tab1</a></li>
        <li><a href="#">Tab2</a></li>
        <li><a href="#">Tab3</a></li>
    </ul>
    <div class="panes">
        <div>......</div>
        <div>......</div>
        <div>......</div>
    </div>
</div>

tab-switch是传递到组件对象的参数，tabs为tabs外层容器的类名，panes则是tab点击对应显示内容的外容器的类名。类tabs、panes可以在配置中指定。

初始化Tab切换所需要的JS代码。

<script>
new TabSwitch(id, options);
/*
options = {
    curIndex    : 0,        //默认索引
    eventType   : 'click',  //tab切换事件
    tabConCls   : 'tabs',   //tab外容器类名
    paneConCls  : 'panes',  //pane外层容器类名
    history     : true,     //记住点击历史(html5 localStorage)
    autoPlay    : false,    //自动切换
    duration    : 4000      //切换间隔
}
*/
</script>

代码简单，感觉没什么需要解释之处。如有不明，可以m我。

查看演示 下载源码