本文实例为大家分享了原生射流研究…实现标签选项卡切换效果的代码，供大家参考，具体内容如下

1.html部分

body div id=' tab ' div class=' tab _ menu ' ul Li class=' selected ' a href=' # '时事/a/li lia href='# '体育/a/li lia href='# '娱乐/a/Li/ul/div class=' tab _ box ' div时事/div div class='hide '体育/div div class='hide '娱乐/div /div /div /body2.css部分：样式部分实现方法多种多样，这是我写的简单的演示，我最不擅长的钢性铸铁.选项卡_菜单。所选{底色： # AAA} .tab _ menu ul { height:30px}。tab _ menu ul Li { float : left list-style : none；宽度：50 px高度：30 pxcolor : # 000 border : solid 1px灰色；边框-底部：无；文本对齐：居中；线高：30 px右边距：3 px} .选项卡菜单ul阿利{ text-摆设：无；} .tab _ box { width:170px高度：150 pxborder:solid 1px灰色；} .制表符_框.隐藏{ display:none}3。重要的射流研究…部分：

窗户。onload=function(){ var OTab=document。getelementbyid(' tab ')；var AlI=OTab。GetElementsBytagname(' Li ')；var OtaBox=OtaB。GetElementsBytagname(' div ')[1]；var ABox=OTABBox。GetElementsBytagname(' div ')；for(var I=0；iaLi.lengthi ){ aLi[i].索引=我；aLi[i].onclick=function(){ for(var j=0；jaLi.lengthj ){ aLi[j].className=//取消菜单样式aBox[j].隐藏/隐藏所有的tabDiv } aLi[this.index].选择框[this.index].className=} } }

这个简单粗暴，完全没有考虑如果标签菜单、标签框有多个样式的情况，不适应项目只是一个思路。很多地方需要完善。下面考虑标签多个班级的情况，不过一般都有多个同学们，现在就要用到去除某个同学们，添加班级的技能了。

3.1原生射流研究…中班级的添加及删除。

窗户。onload=function(){ var OTab=document。getelementbyid(' tab ')；var AlI=OTab。GetElementsBytagname(' Li ')；var OtaBox=OtaB。GetElementsBytagname(' div ')[1]；var ABox=OTABBox。GetElementsBytagname(' div ')；for(var I=0；iaLi.lengthi ){ aLi[i].索引=我；aLi[i].onclick=function(){ for(var j=0；jaLi.lengthj){ var aClass=AlI[j]。类名。split(')；//元素。类名是一个字符串，切割成数组var aclass 1=ABox[j]。类名。split(')；//同样的方法得到包厢的for(var z=0；Zac lass . length z){ if(aClass[z]==' selected '){ aClass。拼接(z，1)；//利用数组的接合方法删除找到的这个类} } for(var k=0；KAC一班。长度；k){ if(ACL ass 1[k]==' hide '){ ACL ass 1。拼接(k，1)；} } aLi[j].类名=AClass。join(')；//所有的菜单都去除挑选样式aBox[j].隐藏/所有包厢都隐藏aBox[this.index].类名=AClass 1。join(')；//当前包厢显示阿里[this.index].选定的/当前菜单添加挑选样式} } } }亲测有效，不过都写在一个方法里有点乱，而且类多的时候效率也是问题，不过类应该不很很多吧==以后再优化吧，这个功能用jquery很简单。

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