JavaScript实现Tab选项卡切换


Posted in Javascript onFebruary 13, 2020

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

会用到原生js的dom操作

JavaScript实现Tab选项卡切换

html

<body>
 <div id="tab">
 <div id="tab_header">
  <ul>
  <li class="seclect">1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  </ul>
 </div>
 <div id="tab_body">
  <div class="dom" style="display: block;">
  <ul>
   <li>1</li>
   <li>1</li>
   <li>1</li>
   <li>1</li>
  </ul>
  </div>
  <div class="dom">
  <ul>
   <li>2</li>
   <li>2</li>
   <li>2</li>
   <li>2</li>
  </ul>
  </div>
  <div class="dom">
  <ul>
   <li>3</li>
   <li>3</li>
   <li>3</li>
   <li>3</li>
  </ul>
  </div>
  <div class="dom">
  <ul>
   <li>4</li>
   <li>4</li>
   <li>4</li>
   <li>4</li>
  </ul>
  </div>
  <div class="dom">
  <ul>
   <li>5</li>
   <li>5</li>
   <li>5</li>
   <li>5</li>
  </ul>
  </div>
 </div>
</div>

css就不放了

js

window.onload = function(){
 var allLis = $('tab_header').getElementsByTagName('li');
 var allDoms = $('tab_body').getElementsByClassName('dom');
 console.log(allLis,allDoms);
 // 遍历拿到的allLis
 for(var i =0; i<allLis.length;i++){
 var li = allLis[i];
 li.index = i; 
 li.onmouseover = function(){
  // 排他思想 将所有的class清空
  for(var j = 0;j<allLis.length;j++){
  allLis[j].className = '';
  allDoms[j].style.display='none';
  }
  this.className = 'seclect';
  allDoms[this.index].style.display='block';
 }
 }
}
function $(id){
 return typeof id === "string" ? document.getElementById(id) : null;
}

这里面的 function $(id) 是我封装的一个dom id选择器,在里面先拿到准备操作的事件源,遍历拿到的数组,onmouseover鼠标移入时,再次遍历一数组,将数组里所有的classname 变为空,以及display样式隐藏,在移入时,移入哪个,给哪个赋值即可。

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

Javascript 相关文章推荐
JS下拉缓冲菜单示例代码
Aug 30 Javascript
JS+CSS实现淡入式焦点图片幻灯切换效果的方法
Feb 26 Javascript
AngularJS基础 ng-dblclick 指令用法
Aug 01 Javascript
js原生跨域_用script标签的简单实现
Sep 24 Javascript
微信小程序(应用号)简单实例应用及实例详解
Sep 26 Javascript
JS常见简单正则表达式验证功能小结【手机,地址,企业税号,金额,身份证等】
Jan 22 Javascript
canvas的神奇用法
Feb 03 Javascript
原生JS京东轮播图代码
Mar 22 Javascript
vue实现页面加载动画效果
Sep 19 Javascript
webpack写jquery插件的环境配置
Dec 21 jQuery
解决新建一个vue项目过程中遇到的问题
Oct 22 Javascript
一篇文章让你搞懂JavaScript 原型和原型链
Nov 23 Javascript
Angular 多模块项目构建过程
Feb 13 #Javascript
小程序卡片切换效果组件wxCardSwiper的实现
Feb 13 #Javascript
JavaScript实现省市区三级联动
Feb 13 #Javascript
jquery传参及获取方式(两种方式)
Feb 13 #jQuery
JS实现页面数据懒加载
Feb 13 #Javascript
node.js中fs文件系统模块的使用方法实例详解
Feb 13 #Javascript
原生JS与JQ获取元素的区别详解
Feb 13 #Javascript
You might like
PHP生成验证码时“图像因其本身有错无法显示”的解决方法
2013/08/07 PHP
php实现的zip文件内容比较类
2014/09/24 PHP
php常见的魔术方法详解
2014/12/25 PHP
PHP调用.NET的WebService 简单实例
2015/03/27 PHP
php抛出异常与捕捉特定类型的异常详解
2016/10/26 PHP
用javascript实现计算两个日期的间隔天数
2007/08/14 Javascript
jQuery select操作控制方法小结
2010/05/26 Javascript
js调试系列 断点与动态调试[基础篇]
2014/06/18 Javascript
js事件驱动机制 浏览器兼容处理方法
2016/07/23 Javascript
Bootstrap基本组件学习笔记之按钮组(8)
2016/12/07 Javascript
浅谈js中的变量名和函数名重名
2017/02/13 Javascript
微信小程序 input表单与redio及下拉列表的使用实例
2017/09/20 Javascript
详谈js的变量提升以及使用方法
2018/10/06 Javascript
浅谈Vue服务端渲染框架Nuxt的那些事
2018/12/21 Javascript
微信公众号平台接口开发 获取access_token过程解析
2019/08/14 Javascript
uniapp,微信小程序中使用 MQTT的问题
2020/07/11 Javascript
JavaScript实现打字游戏
2021/02/19 Javascript
[03:22]DOTA2超级联赛专访单车:找到属于自己的英雄
2013/06/08 DOTA
[36:20]KG vs SECRET 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
python实现linux下抓包并存库功能
2018/07/18 Python
python爬虫之验证码篇3-滑动验证码识别技术
2019/04/11 Python
windows下Python安装、使用教程和Notepad++的使用教程
2019/10/06 Python
python读取配置文件方式(ini、yaml、xml)
2020/04/09 Python
Numpy一维线性插值函数的用法
2020/04/22 Python
美国大城市最热门旅游景点门票:CityPASS
2016/12/16 全球购物
美国葡萄酒网上商店:Martha Stewart Wine Co.
2019/03/17 全球购物
Dyson戴森波兰官网:Dyson.pl
2019/08/05 全球购物
大客户销售经理职责
2013/12/04 职场文书
进步之星获奖感言
2014/02/22 职场文书
学习经验交流会主持词
2014/04/01 职场文书
高三毕业典礼演讲稿
2014/05/13 职场文书
民事诉讼代理授权委托书
2014/10/11 职场文书
群众路线个人整改措施
2014/10/24 职场文书
百家讲坛观后感
2015/06/12 职场文书
2019如何书写演讲稿?
2019/07/01 职场文书
Python批量将csv文件转化成xml文件的实例
2021/05/10 Python