在外贸网站建设过程中，对于选项卡这个效果，相信多数人并不陌生，尤其是外贸购物网站，会经常用到选项卡这个效果，我们最常用的是通过JS实现，但这样就有一个弊端，如果选项卡的个数未知的情况下，JS就无法控制，容易报错，下面我们就来看看通过SuperSlide 插件轻松解决这一问题。

首先需要引入两个js

测试效果代码：

/* css 重置 */
*{margin:0; padding:0; list-style:none; }
body{ background:#fff; font:normal 12px/22px 宋体; }
img{ border:0; }
a{ text-decoration:none; color:#333; }
a:hover{ color:#1974A1; }

/* 本例子css */
.slideTxtBox{ width:450px; border:1px solid #ddd; text-align:left; }
.slideTxtBox .hd{ height:30px; line-height:30px; background:#f4f4f4; padding:0 20px; border-bottom:1px solid #ddd; position:relative; }
.slideTxtBox .hd ul{ float:left; position:absolute; left:20px; top:-1px; height:32px; }
.slideTxtBox .hd ul li{ float:left; padding:0 15px; cursor:pointer; }
.slideTxtBox .hd ul li.on{ height:30px; background:#fff; border:1px solid #ddd; border-bottom:2px solid #fff; }
.slideTxtBox .bd ul{ padding:15px; zoom:1; }
.slideTxtBox .bd li{ height:24px; line-height:24px; }
.slideTxtBox .bd li .date{ float:right; color:#999; }

最后记得调用JS：

jQuery(“.slideTxtBox”).slide();

用起来方便，而且简单！