拓展版Tab标签轮播代码。淘宝店铺拓展版装修中所用的轮播焦点图效果，可以通过焦点图的Tab插件制作完成，本文讲解如何制作tab标签式焦点图。
由于淘宝装修平台增强了一些展示效果，但这些效果需要用Javascript编写，但目前淘宝装修平台又不能将Javascript开放给众多设计师，所以他们提供了一些Widget库供设计师们调用。
首先，针对不同的效果，需要配置不同的参数，也应该采用不同的Html代码结构。
然后利用名叫J_TWidget的元素，让库文件找到它，并开始渲染，比如：
<divclass="J_TWidget"data-type="Slide"data-cfg="{…}">
<!--code-->
</div>
现在我们拿第一种Tab标签来举例。
<divid="demo1"class="J_TWidget"data-widget-type="Tabs"data-widget-config="{
'effect':'fade',
'autoplay':true,
'circular':true
}">
<divclass="section">
<ulclass="ks-switchable-nav">
<liclass="ks-active">标题A</li>
<li>标题B</li>
<li>标题C</li>
<li>标题D</li>
</ul>
<divclass="ks-switchable-content">
<div>-----预先加载的内容---------</div>
<divstyle="display:none">内容B</div><divstyle="display:none">内容C</div>
<divstyle="display:none">内容D</div>
</div>
</div>
</div>
上面代码中粗体部分是比较重要的地方，必须添加，下面一一对其进行解释。
1、demo1表示为最外面的容器；
2、J_TWidget表示需要用库文件开始渲染；
3、data-widget-type="Tabs"这个是用来告诉库文件，我们的widget组件要用什么方式来渲染，即它的表现方式为Tab标签式；
4、data-widget-config=”{….}”这里是组件的相关配置，是很灵活的一部分，可以看后面的配置表；
5、class=”ks-switchable-nav”这个用来定义当前组件进行轮播的目标列表的class值，就是触发区域；
6、class="ks-switchable-content"用来定义轮播列表所对应的内容区域的class值。
将以上代码拷贝到装修后台预览一下，你会发现他们是错位的，不错，这是因为还差一步——定义CSS，我们需要将CSS内容也拷贝进后台：
<style>
#demo1{
position:relative;
width:750px;
padding-top:29px;
}
#demo1.ks-switchable-nav{position:absolute;left:20px;margin-top:-29px;z-index:99;}
#demo1.ks-switchable-navli{
float:left;
width:130px;
height:27px;
line-height:21px;
text-align:center;
background:url(http://img03.taobaocdn.com/tps/i3/T1de0RXlhAXXXXXXXX-130-70.gif)no-repeat06px;
margin-right:3px;
padding-top:8px;
cursor:pointer;
}
#demo1.ks-switchable-navli.ks-active{background-position:0-40px;cursor:default;}
#demo1.ks-switchable-content{
position:relative;
height:120px;
padding:20px;
border:1pxsolid#AEC7E5;
}
#demo1.unselected.clsli{float:left;}
</style>
这样将Html和CSS内容融合到一起使用，才能让轮播焦点图起到效果。而且我们还可以利用CSS将它的样式改变，比如将Tab标签的触发区域放在内容区下面等等。
下面是配置参数列表，我们可以根据它的可选参数，制作出适合自己的特殊效果。配置参数列表：
比如我们想让触发点变成鼠标点击触发，那么可以修改为：
<divid="demo1"class="J_TWidget"data-widget-type="Tabs"data-widget-config="{
triggerType:click,
}">
<!--code-->
</div>
怎么样，学会了吗，其实这些一点也不难，只用掌握怎样应用而以。
乐发网超市批发网提供超市货源信息,超市采购进货渠道。超市进货网提供成都食品批发,日用百货批发信息、微信淘宝网店超市采购信息和超市加盟信息.打造国内超市采购商与批发市场供应厂商搭建网上批发市场平台,是全国批发市场行业中电子商务权威性网站。
本文来源： 淘宝拓展版Tab标签轮播代码
