所需DOM结构
本组件对DOM结构没有特殊要求，调用只需要按顺序将ul列表中每个元素跟内容元素一一对应即可，当然触点和内容都必须包含在唯一的外层容器里面。

<div  class="J_TWidget section">
    <ul class="ks-switchable-nav">
        <li class="ks-active">标题 A</li>
        <li>标题 B</li>
        <li>标题 C</li>
        <li>标题 D</li>
    </ul>
    <div class="ks-switchable-content">
        <div>
                                 -----预先加载的内容---------
        </div>
        <div style="display: none">内容 B</div>
        <div style="display: none">内容 C</div>
        <div style="display: none">内容 D</div>
    </div>
    </div>

组件调用方法

<div class=”J_TWidget”  data-widget-type=”Tabs”  data-widget-config=”{
            'effect': 'fade',
            'autoplay': true,
            'circular': true
      }”>
    <!--  code  -- >
    </div>

配置参数列表

例子

<div  class="J_TWidget tab1" data-widget-type="Tabs">
    <ul class="ks-switchable-nav">
        <li class="ks-active">标题 A</li>
        <li>标题 B</li>
        <li>标题 C</li>
        <li>标题 D</li>
        <li>标题 E</li>
    </ul>
    <div class="ks-switchable-content">
        <div>内容 A</div>
        <div style="display: none">内容 B</div>
        <div style="display: none">内容 C</div>
        <div style="display: none">内容 D</div>
        <div style="display: none">内容 E</div>
    </div>
</div>

.tab1 li{
    list-style:none;
}
.tab1 { position: relative; width: 750px; padding-top: 29px; }
.tab1 .ks-switchable-nav { position: absolute; left: 20px; margin-top: -29px; z-index: 99; }
.tab1 .ks-switchable-nav li {
    float: left;
    width: 130px;
    height: 27px;
    line-height: 21px;
    text-align: center;
    background: url(http://img01.taobaocdn.com/tps/i1/T1XtV7XjhsXXXXXXXX-130-70.gif) no-repeat 0 6px;
    margin-right: 3px;
    padding-top: 8px;
    cursor: pointer;
}
.tab1 .ks-switchable-nav li.ks-active { background-position: 0 -40px; cursor: default; }
.tab1 .ks-switchable-content {
    position: relative;
    height: 120px;
    padding: 20px;
    border: 1px solid #AEC7E5;
}