js滑动tab选项卡效果_网页选项卡特效免费下载_我爱模板网 - 提供下载各种免费建站资源，免费网站模板，免费网页特效，让你爱上建站！

特效介绍

仿阿里巴巴js滑动显示不同内容的tab选项卡特效，共三行两列，滑动上去，就会显示对应的内容。

使用方法

1、在head引入下面的css代码：

01<style type="text/css">
02/*这里定义样式,由于左右滑动区宽度不同,所以代码略多*/
03body {margin:0px;border:0px;font-size:12px;background-color:#fff;}
04a:link{color: #003278;text-decoration: none;}
05a:visited{color: #003278;text-decoration: none;}
06a:hover{color: #FF6600;text-decoration: underline;}
07#slideBox{background:url(images/slideBox_bg.gif);height:168px;width:178px;padding-left:5px;padding-right:5px;}
08#slide{padding-top:5px}
09#slide li img{margin-right:3px}
10#slideBox ul{padding:0;margin:0;clear:both;list-style:none;overflow:hidden}
11#slideBox li{float:left;font-weight:bold;height:37px !important;height:27px;}
12#slideBox li a:link,#slideBox li a:visited{color:#000;}
13#slideBox li a:hover{color:#ff7300;text-decoration: none}
14#slideBox .l{background:url(images/slideBox_tableft.gif);width:80px;}
15#slideBox .r{background:url(images/slideBox_tabright.gif);width:94px;float:right}
16#slideBox .l_h{background:url(images/slideBox_tableft_h.gif);width:80px;}
17#slideBox .r_h{background:url(images/slideBox_tabright_h.gif);width:94px;float:right;}
18#slideBox .hide{display:none}
19#slideBox .l a{width:52px;}
20#slideBox .r a{width:68px;}
21.arrow{padding-left:8px;background:url(images/icon_arrow03_right_08x.gif) no-repeat;}
22#slideBox .l a,#slideBox .r a,#slideBox .l_h a,#slideBox .r_h a{padding-left:24px;display:block;height:100%;padding-top:10px;}
23.btn_zchy{background:url(images/icon_zchy01_12x.gif) 5px 10px no-repeat;}
24.btn_cxt{background:url(images/icon_cxt01_12x.gif) 5px 10px no-repeat;}
25.btn_tggs{background:url(images/icon_tggs01_12x.gif) 5px 10px no-repeat;}
26.btn_fbxx{background:url(images/icon_fbxx01_12x.gif) 5px 10px no-repeat;}
27.btn_xzmj{background:url(images/icon_xzmj01_12x.gif) 5px 10px no-repeat;}
28.btn_alisoft{background:url(images/icon_alisoft01_12x.gif) 5px 10px no-repeat;}
29/*cont*/
30#slideBox .cont_l{float:left;background:url(images/slideBox_conleft.gif);width:157px;height:31px;padding:9px 7px 7px 14px;margin-bottom:4px;overflow:hidden}
31#slideBox .cont_r{float:left;background:url(images/slideBox_conright.gif);width:157px;height:31px;padding:9px 7px 7px 14px;margin-bottom:4px;overflow:hidden}
32#slideBox .oneline{line-height:33px;}
33</style>

2、html引入到你需要使用的地方

01<div id="slideBox">
02<div id="slide">
03  <ul>
04  <li class="l_h"><a href="http://www.5imoban.net/" class="btn_zchy">注册会员</a></li>
05  <li class="r"><a href="http://www.5imoban.net/" class="btn_cxt">加入诚信通</a></li>
06  </ul>
07  <div class="cont_l" id="sc_1">
08    内容一
09  </div>
10  <div class="hide" id="sc_2">
11    内容二
12  </div>
13   <ul>
14  <li class="l"><a href="http://www.5imoban.net/" class="btn_tggs">推广公司</a></li>
15  <li class="r"><a href="http://www.5imoban.net/" class="btn_fbxx">发布信息</a></li>
16  </ul>
17   <div class="hide" id="sc_3">
18    内容三
19  </div>
20  <div class="hide" id="sc_4">
21    内容四
22</div>
23  <ul>
24  <li class="l"><a href="http://www.5imoban.net/" class="btn_xzmj">寻找买家</a></li>
25  <li class="r"><a href="http://www.5imoban.net/" class="btn_alisoft">阿里软件</a></li>
26  </ul>
27  <div class="hide" id="sc_5">
28    内容五
29  </div>
30  <div class="hide" id="sc_6">
31    内容六
32  </div>
33</div>    
34</div>

3、js代码放到您的html的</body>的前面：

01<script type="text/javascript">
02/*alitab
03author:alicn-wd-ym
04这里是所有js实现,代码比较少,主要还是取巧,利用了classname的关系
05*/
06var slideTabIndex=1;
07var sTabList = document.getElementById("slideBox").getElementsByTagName("li");
08for(var i=0;i<sTabList.length;i++){
09var obj = sTabList[i].getElementsByTagName("a")[0];
10sTabList[i].getElementsByTagName("a")[0].id="slideBtn_"+(i+1);
11if (obj.addEventListener) {
12obj.addEventListener( "mouseover", overSlide, false );
13}
14else if (obj.attachEvent) {
15obj.attachEvent( "onmouseover", overSlide );
16}
17}
18function overSlide(e){
19e = window.event || e;
20var srcElement = e.srcElement || e.target;
21var newTabIndex=srcElement.id.replace("slideBtn_","");
22var pos = srcElement.parentNode.className;
23if(newTabIndex==""||pos.indexOf("_h")!=-1)return;
24document.getElementById("slideBtn_"+slideTabIndex).parentNode.className=document.getElementById("slideBtn_"+slideTabIndex).parentNode.className.replace("_h","");
25document.getElementById("sc_"+slideTabIndex).className="hide";
26document.getElementById("sc_"+newTabIndex).className="cont_"+pos;
27srcElement.parentNode.className = pos+"_h";
28slideTabIndex=newTabIndex;
29}
30<!--slidebox end-->
31</script>

部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！

js滑动tab选项卡效果

猜你喜欢