PHP群:95885625 Hbuilder+MUI群:81989597 站长QQ:634381967
    您现在的位置: 首页 > JS特效 > Tab选项卡 > 正文

    js滑动tab选项卡效果

    作者:admin来源:网络浏览:时间:2014-09-05 09:37:16我要评论
    分享到

    内容介绍

    仿阿里巴巴js滑动显示不同内容的tab选项卡特效,共三行两列,滑动上去,就会显示对应的内容。
    1. <script type="text/javascript">  
    2. /*alitab  
    3. author:alicn-wd-ym  
    4. 这里是所有js实现,代码比较少,主要还是取巧,利用了classname的关系  
    5. */ 
    6. var slideTabIndex=1;  
    7. var sTabList = document.getElementById("slideBox").getElementsByTagName("li");  
    8. for(var i=0;i<sTabList.length;i++){  
    9. var obj = sTabList[i].getElementsByTagName("a")[0];  
    10. sTabList[i].getElementsByTagName("a")[0].id="slideBtn_"+(i+1);  
    11. if (obj.addEventListener) {  
    12. obj.addEventListener( "mouseover", overSlide, false );  
    13. }  
    14. else if (obj.attachEvent) {  
    15. obj.attachEvent( "onmouseover", overSlide );  
    16. }  
    17. }  
    18. function overSlide(e){  
    19. e = window.event || e;  
    20. var srcElement = e.srcElement || e.target;  
    21. var newTabIndex=srcElement.id.replace("slideBtn_","");  
    22. var pos = srcElement.parentNode.className;  
    23. if(newTabIndex==""||pos.indexOf("_h")!=-1)return;  
    24. document.getElementById("slideBtn_"+slideTabIndex).parentNode.className=document.getElementById("slideBtn_"+slideTabIndex).parentNode.className.replace("_h","");  
    25. document.getElementById("sc_"+slideTabIndex).className="hide";  
    26. document.getElementById("sc_"+newTabIndex).className="cont_"+pos;  
    27. srcElement.parentNode.className = pos+"_h";  
    28. slideTabIndex=newTabIndex;  
    29. }  
    30. <!--slidebox end-->  
    31. </script> 

     

    下载资源:131 下载积分:0 积分
    转载请注明(B5教程网)原文链接:https://b5.mxunkeji.com/content-57-441-1.html
    相关热词搜索: tab选项卡 js代码