编程 Javascript

JavaScript实现Tab选项卡切换

Posted in Javascript onFebruary 13, 2020

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

会用到原生js的dom操作

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就不放了

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实现Tab选项卡切换

- Author -

空格-

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

纯JavaScript实现的完美渐变弹出层效果代码

Apr 02 Javascript

js汉字排序问题支持中英文混排，兼容各浏览器，包括CHROME

Dec 20 Javascript

jquery实现兼容IE8的异步上传文件

Jun 15 Javascript

js判断复选框是否选中及选中个数的实现代码

May 30 Javascript

JavaScript6 let 新语法优势介绍

Jul 15 Javascript

JavaScript表单焦点自动切换代码

Jul 24 Javascript

浅谈JavaScript 覆盖原型以及更改原型

Aug 31 Javascript

JS自定义混合Mixin函数示例

Nov 26 Javascript

js制作可以延时消失的菜单

Jan 13 Javascript

vue+vuex+axio从后台获取数据存入vuex实现组件之间共享数据

Apr 22 Javascript

js导出Excel表格超出26位英文字符的解决方法ES6

Nov 15 Javascript

原生js实现随机点餐效果

Dec 10 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