原生js实现tab选项卡切换


Posted in Javascript onMarch 23, 2020

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

1.html部分

<body>
 <div id="tab">
 <div class="tab_menu">
 <ul>
 <li class="selected"><a href="#">时事</a></li>
 <li><a href="#">体育</a></li>
 <li><a href="#">娱乐</a></li>
 </ul>
 </div>
 <div class="tab_box">
 <div>时事</div>
 <div class="hide">体育</div>
 <div class="hide">娱乐</div>
 </div>
 </div>
 </body>

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

.tab_menu .selected{background-color:#aaa;}
 .tab_menu ul{height:30px;}
 .tab_menu ul li{float:left;list-style:none;width:50px;height:30px;color:#000;border:solid 1px gray;border-bottom:none; text-align:center;line-height:30px;margin-right:3px;}
 .tab_menu ul li a{text-decoration:none;}
 .tab_box{width:170px;height:150px;border:solid 1px gray;}
 .tab_box .hide{display:none;}

3.重要的js部分:

window.onload=function(){
 var oTab=document.getElementById('tab');
 var aLi=oTab.getElementsByTagName('li');
 var oTabBox=oTab.getElementsByTagName('div')[1];
 var aBox=oTabBox.getElementsByTagName('div');
 for(var i=0;i<aLi.length;i++){
 aLi[i].index=i;
 aLi[i].onclick=function(){
 for(var j=0;j<aLi.length;j++){
 aLi[j].className='';//取消菜单样式
 aBox[j].className='hide';//隐藏所有的tabDiv
 }
 aLi[this.index].className='selected';
 aBox[this.index].className='';
 }
 }
 }

原生js实现tab选项卡切换 

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

3.1原生js中class的添加及删除。

window.onload=function(){
 var oTab=document.getElementById('tab');
 var aLi=oTab.getElementsByTagName('li');
 var oTabBox=oTab.getElementsByTagName('div')[1];
 var aBox=oTabBox.getElementsByTagName('div');
 for(var i=0;i<aLi.length;i++){
 aLi[i].index=i;
 aLi[i].onclick=function(){
 for(var j=0;j<aLi.length;j++){
 var aClass=aLi[j].className.split(' ');//元素.className是一个字符串,切割成数组
 var aClass1=aBox[j].className.split(' ');//同样的方法得到box的
 for(var z=0;z<aClass.length;z++){
 if(aClass[z]=='selected'){
  aClass.splice(z,1);//利用数组的splice方法删除找到的这个类
 }
 }
 for(var k=0;k<aClass1.length;k++){
 if(aClass1[k]=='hide'){
  aClass1.splice(k,1);
 }
 }
 aLi[j].className=aClass.join(' ');//所有的menu都去除selected样式
 aBox[j].className+=' hide';//所有box都隐藏
 aBox[this.index].className=aClass1.join(' ');//当前box显示
 aLi[this.index].className+=' selected';//当前menu添加select样式
 }
 
 }
 }
 }

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

如果大家还想深入学习,可以点击两个精彩的专题:javascript选项卡操作方法汇总 jquery选项卡操作方法汇总

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JAVASCRIPT style 中visibility和display之间的区别
Jan 22 Javascript
js focus不起作用的解决方法(主要是因为dom元素是否加载完成)
Nov 05 Javascript
js和php如何获取当前url的内容
Sep 22 Javascript
javascript中的=等号个数问题两个跟三个有什么区别
Oct 23 Javascript
jQuery 顶部导航跟随滚动条滚动固定浮动在顶部
Jun 06 Javascript
javascript:void(0)点击登录没反应怎么解决
Nov 13 Javascript
Bootstrap每天必学之按钮
Nov 26 Javascript
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
May 08 jQuery
微信小程序 跳转传递数据的实例
Jul 06 Javascript
微信小程序实现tab页面切换功能
Jul 13 Javascript
vue中input的v-model清空操作
Sep 06 Javascript
js实现点赞按钮功能的实例代码
Mar 06 Javascript
jquery的checkbox,radio,select等方法小结
Aug 30 #Javascript
Javascript日期格式化format函数的使用方法
Aug 30 #Javascript
浅析ES6的八进制与二进制整数字面量
Aug 30 #Javascript
AngularJS轻松实现双击排序的功能
Aug 30 #Javascript
jQuery simpleModal插件的使用介绍
Aug 30 #Javascript
Angular懒加载机制刷新后无法回退的快速解决方法
Aug 30 #Javascript
AngularJS 实现弹性盒子布局的方法
Aug 30 #Javascript
You might like
随机广告显示(PHP函数)
2006/10/09 PHP
修改好的jquery滚动字幕效果实现代码
2011/06/22 Javascript
js处理php输出时间戳对不上号的解决方法
2014/06/20 Javascript
Jquery实现遮罩层的方法
2015/06/08 Javascript
javascript数组排序汇总
2015/07/07 Javascript
JavaScript手机振动API
2016/06/11 Javascript
Bootstrap布局组件教程之Bootstrap下拉菜单
2016/06/12 Javascript
JS限定手机版中图片大小随分辨率自动调整的方法
2016/12/05 Javascript
JS异步文件上传(兼容IE8+)
2017/04/02 Javascript
js实现图片加载淡入淡出效果
2017/04/07 Javascript
vue2.0实现导航菜单切换效果
2017/05/08 Javascript
详解使用vue脚手架工具搭建vue-webpack项目
2017/05/10 Javascript
boostrap模态框二次弹出清空原有内容的方法
2018/08/10 Javascript
vue draggable resizable 实现可拖拽缩放的组件功能
2019/07/15 Javascript
微信小程序实现watch监听
2020/06/04 Javascript
JavaScript实现烟花绽放动画效果
2020/08/04 Javascript
linux系统使用python监控apache服务器进程脚本分享
2014/01/15 Python
用Python写冒泡排序代码
2016/04/12 Python
Python实现计算两个时间之间相差天数的方法
2017/05/10 Python
同时安装Python2 &amp; Python3 cmd下版本自由选择的方法
2017/12/09 Python
Python中如何将一个类方法变为多个方法
2019/12/30 Python
pycharm开发一个简单界面和通用mvc模板(操作方法图解)
2020/05/27 Python
Keras 实现加载预训练模型并冻结网络的层
2020/06/15 Python
欧洲最大的化妆品连锁公司:Douglas道格拉斯
2017/05/06 全球购物
国外软件测试工程师面试题
2016/12/09 面试题
网络工程与软件技术毕业生自荐信
2013/09/24 职场文书
博士生入学考试推荐信
2013/11/17 职场文书
销售简历自我评价
2014/01/24 职场文书
项目投资意向书
2014/04/01 职场文书
债务授权委托书范本
2014/10/17 职场文书
开展党的群众路线教育实践活动总结报告
2014/10/31 职场文书
2015年酒店服务员工作总结
2015/05/18 职场文书
关于五一放假的通知
2015/08/18 职场文书
如何写一份成功的商业计划书
2019/06/25 职场文书
Oracle 临时表空间SQL语句的实现
2021/09/25 Oracle
带你了解Java中的ForkJoin
2022/04/28 Java/Android