资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划，从策略到执行的一站式服务

网站建设 >

查看其它板块

JS如何实现标签页切换效果

这篇文章给大家分享的是有关JS如何实现标签页切换效果的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

成都创新互联公司专注于企业成都营销网站建设、网站重做改版、电白网站定制设计、自适应品牌网站建设、H5场景定制、成都商城网站开发、集团公司官网建设、外贸网站建设、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为电白等各大城市提供网站开发制作服务。

具体内容如下




resize

*{margin:0;padding:0;}
 #wrap{width:500px; margin:10px auto; }
 #tag{ width:498px; overflow:hidden; background:#000; border:1px solid #000; }
 #tag li{list-style:none; float:left; margin-right:0px; color:white; padding:5px 20px; cursor: pointer;}
 #tag .current{ color:#000; background:#ccc; }
 #tagContent div{ width:498px; border:1px solid #000; border-top:none; height:300px; display:none; }




 
  
  • 标签一
    • 
  
  • 标签二
    • 
  
  • 标签三
    • 
  
  • 标签4
    • 
  
  • 标签5
    • 
 
 
   内容一
    内容一 
       内容二
    内容二 
       内容三
    内容三 
       内容4
    内容4     内容4
    内容5555555555555555    //nameSpace var VVG = {}; VVG.DOM = {}; //创建getElementsByClassName方法 VVG.DOM.getElementsByClassName = function(str,parent,tag){  //父节点存在 if(parent){  // 当父节点为string类型时，查找DOM节点，否则直接引用parent   parent = typeof parent == "string" ? document.getElementById(parent):parent;   // parent为空时提示错误信息 if(!parent) alert("找不到标签，请检查参数是否正确");  }else{   // 未传值时，父节点为body   parent = document.body;  }  // tagContent为节点类型，未传值时为all节点  tag = tag || "*";  // 在父节点查找子节点，建立空数组arr var els = parent.getElementsByTagName(tag),arr=[];  for(var i=0,n=els.length;i= 0; i--) {    // 赋值this 与 that,避免this混乱 var that = this;    // 设置对象index属性    ulli[i].index = i;    // 设置对象的事件    ulli[i]["on" + this.trggle] = function(){     for(var j = tabConClasses.length - 1; j >= 0; j--){      tabConClasses[j].style.display = "none";      ulli[j].className = "";     }     tabConClasses[this.index].style.display = "block";     this.className = that.currentCss;    }    }   }  } // 新建对象实例 var TabManager1 = new VVG.TabManager(  {  root:"warp",//包裹tab对象的div层的ID名称，必填  tabUlId:"tag",//TAB标签LI元素的父亲UL元素的ID名称，必填  tabConId:"tagContent",//内容元素的包裹盒子的ID名称，必填   trggle:"mouseover",//切换方式，默认为click，可选  currentCss:"current",//TAB标签liy元素的当前CSS名称，默认为current  tabConClass:"J_tabClass",//内容元素的CLASS名称，默认为J_tabClass  } ); // 调用对象方法 TabManager1.tabChange();

    感谢各位的阅读！关于“JS如何实现标签页切换效果”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！


    分享文章：JS如何实现标签页切换效果
    网页地址：http://cdkjz.cn/article/pipspe.html
    返回首页 了解更多建站资讯

    相关资讯

    多年建站经验

    多一份参考，总有益处

    联系快上网，免费获得专属《策划方案》及报价

    咨询相关问题或预约面谈，可以通过以下方式与我们联系

    业务热线：400-028-6601 / 大客户专线   成都：13518219792   座机：028-86922220

    在线咨询 提交需求
    友情链接 交换友情链接
    成都木托盘深圳惠宜防蚊纱窗免备案虚拟主机空间草坪音箱成都多线服务器托管成都标志设计中国西部信息中心成都西信机房托管成都名片印刷厂成都做网站

    成都网站建设公司地址：成都市青羊区太升南路288号锦天国际A座10层 建设咨询400-028-6601

    成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.

    专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网！ | 成都网站建设哪家好？ | 网站建设地图