轻松实现射流研究…选项卡切换效果

这是要实现的效果图：

一。超文本标记语言页面布局

！- HTML页面布局- ul class='tab_menu' li class='已选择'房产/li li家居/li li二手房/li/uldiv class='tab_box' div 275万购昌平邻铁三居总价20万买一居200万内购五环三居140万安家东三环北京首现零首付楼盘53万购东5环50平京楼盘直降5000 中信府公园楼王现房/div div class='hide'40平出租屋大改造美少女的混搭小窝经典清新简欧爱家90平老房焕发新生新中式的酷色温情66平撞色活泼家居瓷砖就像选好老婆卫生间烟道的设计/div div class='hide '通州豪华3居260万二环稀缺2居250w甩西3环通透2居290万130万2居限量抢购黄城根小学学区仅260万121平70万抛！独家别墅280万苏州桥2居优惠价248万/div/div二。半铸钢钢性铸铁(铸造半钢)样式制作

/* CSS样式制作*/* { font-size :14 px；字体粗细：加粗；} .tab _ menu {列表样式：无；左边距：-35px；} li { float:left/*遮不住底部边的位置，怎么解决？*/border:1px纯灰色；边框-底部：无；保证金-底部：-3px；右边距：3 px宽度：70 px文本对齐：居中；padd :7 px 0；}李：悬停{光标：指针；} .tab _ box { clear:both宽度宽度：250像素边界：1像素纯蓝；边框-top:2px纯红；} .所选{背景色：白色；边框-top:2px纯红；} .tab _ box { padd :10 px 80px 0 10px；高度：170 px} .tab _ box div { height:150px线高：30 px} .隐藏{ display:none}三。射流研究…实现选项卡切换

var ul=文档。getelementsbyclassname(' tab _ menu ')，骗子=ul[0].getElementsByTagName('li ')，div=document。getelementsbyclasname(' tab _ box ')，Divar=div[0].getElementsByTagName(' div ')；函数兄弟（元素){ var a=[]；var p=元素。父节点。儿童；for(var I=0；ip.lengthi ){if(p[i]！==元素)a . push(p[I])；}返回a；} for(var I=0；骗子.索引=我；说谎者.onclick=function(){ this。类名=“选定”；var otherLiArr=同级(这个)；for(var j=0；jotherliar . length j){其他骗子[j].对于(var z=0；z Divar . length z){ Divar[z].隐藏Divar[这个。索引].className=} }精彩专题分享：javascript选项卡操作方法汇总jQuery选项卡操作方法汇总

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。