原生js实现tab选项卡切换

前端之家收集整理的这篇文章主要介绍了原生js实现tab选项卡切换前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文实例为大家分享了原生js实现tab选项卡切换效果代码,供大家参考,具体内容如下

1.html部分

Box">
时事

2.css部分:样式部分实现方法多种多样,这是我写的简单的demo,我最不擅长的css ><...

Box{width:170px;height:150px;border:solid 1px gray;} .tab_Box .hide{display:none;}

3.重要的js部分:

Box=oTab.getElementsByTagName('div')[1]; var aBox=oTabBox.getElementsByTagName('div'); for(var i=0;i菜单样式 aBox[j].className='hide';//隐藏所有的tabDiv } aLi[this.index].className='selected'; aBox[this.index].className=''; } } }

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

3.1原生js中class的添加删除

Box=oTab.getElementsByTagName('div')[1]; var aBox=oTabBox.getElementsByTagName('div'); for(var i=0;iBox[j].className.split(' ');//同样的方法得到Box的 for(var z=0;z方法删除找到的这个类 } } for(var k=0;k去除selected样式 aBox[j].className+=' hide';//所有Box都隐藏 aBox[this.index].className=aClass1.join(' ');//当前Box显示 aLi[this.index].className+=' selected';//当前menu添加select样式 }
 }
}

}

亲测有效,不过都写在一个方法里有点乱,而且类多的时候效率也是问题,不过类应该不很很多吧==以后再优化吧,这个功能用jquery很简单。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

原文链接:https://www.f2er.com/js/46207.html

猜你在找的JavaScript相关文章