原生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 相关文章推荐
判断是否输入完毕再激活提交按钮
Jun 26 Javascript
关于JavaScript的一些看法
May 27 Javascript
javascript 模式设计之工厂模式详细说明
May 10 Javascript
jQuery Select(单选) 模拟插件 V1.3.62 改进版
Jul 17 Javascript
jquery delay()介绍及使用指南
Sep 02 Javascript
js判断手机和pc端选择不同执行事件的方法
Jan 30 Javascript
Eclipse编辑jsp、js文件时卡死现象的解决办法汇总
Feb 02 Javascript
vue绑定设置属性的多种方式(5)
Aug 16 Javascript
ligerUI---ListBox(列表框可移动的实例)
Nov 28 Javascript
微信小程序 调用远程接口 给全局数组赋值代码实例
Aug 13 Javascript
vue自定义指令实现仅支持输入数字和浮点型的示例
Oct 30 Javascript
在vue中利用全局路由钩子给url统一添加公共参数的例子
Nov 01 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 伪静态隐藏传递参数名的四种方法
2010/02/22 PHP
php微信公众号js-sdk开发应用
2016/11/28 PHP
Javascript学习笔记6 prototype的提出
2010/01/11 Javascript
JS的location.href跳出框架打开新页面的方法
2014/09/04 Javascript
jQuery获取样式中颜色值的方法
2015/01/29 Javascript
javascript判断网页是关闭还是刷新
2015/09/12 Javascript
JavaScript弹出对话框的三种方式
2016/03/23 Javascript
jQuery基础_入门必看知识点
2016/07/04 Javascript
jQuery操作json常用方法示例
2017/01/04 Javascript
Angular排序实例详解
2017/06/28 Javascript
jQuery代码优化方法总结
2018/01/29 jQuery
基于Vue组件化的日期联动选择器功能的实现代码
2018/11/30 Javascript
JavaScript之Blob对象类型的具体使用方法
2019/11/29 Javascript
js利用iframe实现选项卡效果
2020/08/09 Javascript
在react-antd中弹出层form内容传递给父组件的操作
2020/10/24 Javascript
python基于phantomjs实现导入图片
2016/05/13 Python
Python搭建APNS苹果推送通知推送服务的相关模块使用指南
2016/06/02 Python
pytorch程序异常后删除占用的显存操作
2020/01/13 Python
python 遗传算法求函数极值的实现代码
2020/02/11 Python
Python验证码截取识别代码实例
2020/05/16 Python
实例讲解CSS3中Transform的perspective属性的用法
2016/04/22 HTML / CSS
video实现有声音自动播放的实现方法
2020/05/20 HTML / CSS
Html5+CSS3+EL表达式问题小结
2020/12/19 HTML / CSS
阿迪达斯印度官方商城:adidas India
2017/03/26 全球购物
德国童装购物网站:NICKI´S.com
2018/04/20 全球购物
Chantelle仙黛尔内衣美国官网:法国第一品牌内衣
2018/07/26 全球购物
英国Radley包德国官网:Radley London德国
2019/11/18 全球购物
会计专业大学生求职信范文
2014/01/28 职场文书
学院党委班子四风问题自查报告及整改措施
2014/10/25 职场文书
2015元旦标语横幅
2014/12/09 职场文书
共青团员自我评价
2015/03/10 职场文书
指导教师推荐意见
2015/06/05 职场文书
Python Pandas pandas.read_sql_query函数实例用法分析
2021/06/21 Python
浅析python中特殊文件和特殊函数
2022/02/24 Python
引用计数法和root搜索算法以及JVM中判定对象需要回收的方法
2022/04/19 Java/Android
Hive常用日期格式转换语法
2022/06/25 数据库