原生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实例教程(19) 使用HoTMetal(6)
Dec 23 Javascript
javascript实现划词标记+划词搜索功能
Mar 06 Javascript
对xmlHttp对象方法和属性的理解
Jan 17 Javascript
js定时器(执行一次、重复执行)
Mar 07 Javascript
javascript的switch用法注意事项分析
Feb 02 Javascript
angularJS 中$attrs方法使用指南
Feb 09 Javascript
Bootstrap每天必学之导航
Nov 26 Javascript
通用javascript代码判断版本号是否在版本范围之间
Nov 29 Javascript
深入理解(function(){... })();
Aug 16 Javascript
vue-cli2.0转3.0之项目搭建的详细步骤
Dec 11 Javascript
JS使用JSON.parse(),JSON.stringify()实现对对象的深拷贝功能分析
Mar 06 Javascript
Javascript执行上下文顺序的深入讲解
Nov 04 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 echo, print, print_r, sprintf, var_dump, var_expor的使用区别
2013/06/20 PHP
关于ob_get_contents(),ob_end_clean(),ob_start(),的具体用法详解
2013/06/24 PHP
php函数指定默认值方法的小例子
2013/12/04 PHP
destoon安全设置中需要设置可写权限的目录及文件
2014/06/21 PHP
如何使用jQuery+PHP+MySQL来实现一个在线测试项目
2015/04/26 PHP
php中ob函数缓冲机制深入理解
2015/08/03 PHP
Yii中srbac权限扩展模块工作原理与用法分析
2016/07/14 PHP
php导出csv文件,可导出前导0实例代码
2016/11/16 PHP
php服务器的系统详解
2019/10/12 PHP
Code:loadScript( )加载js的功能函数
2007/02/02 Javascript
今天是星期几的4种JS代码写法
2013/09/17 Javascript
jQuery中对未来的元素绑定事件用bind、live or on
2014/04/17 Javascript
Active控件问题小结(附解决办法)
2016/06/09 Javascript
jquery 实现复选框的全选操作实例代码
2017/01/24 Javascript
vue-cli3.0+element-ui上传组件el-upload的使用
2018/12/03 Javascript
Vue核心概念Getter的使用方法
2019/01/18 Javascript
微信小程序实现下拉框功能
2019/07/16 Javascript
python自动安装pip
2014/04/24 Python
mac PyCharm添加Python解释器及添加package路径的方法
2018/10/29 Python
Python读取xlsx文件的实现方法
2019/07/04 Python
使用python批量修改文件名的方法(视频合并时)
2020/03/24 Python
关于Pytorch MaxUnpool2d中size操作方式
2020/01/03 Python
Python 批量读取文件中指定字符的实现
2020/03/06 Python
keras用auc做metrics以及早停实例
2020/07/02 Python
2020年10款优秀的Python第三方库,看看有你中意的吗?
2021/01/12 Python
香港百佳网上超级市场:PARKNSHOP.com
2020/06/10 全球购物
物流管理应届生求职信
2013/11/07 职场文书
留学顾问岗位职责
2014/04/14 职场文书
人事行政专员岗位职责
2014/07/23 职场文书
信仰心得体会
2014/09/05 职场文书
收款委托书范本
2014/09/11 职场文书
劳动争议和解协议书范本
2014/11/20 职场文书
2014年幼师工作总结
2014/11/22 职场文书
Ajax实现异步加载数据
2021/11/17 Javascript
java实现自定义时钟并实现走时功能
2022/06/21 Java/Android
微信小程序纯CSS实现无限弹幕滚动效果
2022/09/23 HTML / CSS