原生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很简单。

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

js tab tab 选项卡

上一篇：Javascript日期格式化format函数的下一篇：javascript 将共享属性迁移到原型中

原生js实现tab选项卡切换

1.html部分

猜你在找的JavaScript相关文章