JavaScript实现Tab选项卡切换

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

会用到原生js的dom操作

html

 
 
  

  
1
  
2
  
3
  
4
  
5
  
 
 
  
  

   
1
   
1
   
1
   
1
  
  
  
  

   
2
   
2
   
2
   
2
  
  
  
  

   
3
   
3
   
3
   
3
  
  
  
  

   
4
   
4
   
4
   
4
  
  
  
  

   
5
   
5
   
5
   
5
  
  
 

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

这里面的 function $(id) 是我封装的一个dom id选择器，在里面先拿到准备操作的事件源，遍历拿到的数组，onmouseover鼠标移入时，再次遍历一数组，将数组里所有的classname 变为空,以及display样式隐藏，在移入时，移入哪个，给哪个赋值即可。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。