JavaScript学习笔记2之Tab切换

来源：互联网发布：域名更换备案主体编辑：程序博客网时间：2024/05/17 05:13

1、Tab切换简写版1

页面布局如下：

 1 <div id="tab"> 2      <h1 id="title"> 3         <span class="select">标题一</span> 4         <span>标题二</span> 5         <span>标题三</span> 6     </h1> 7     <ul id="content"> 8         <li class="show">内容一</li> 9         <li>内容二</li>10         <li>内容三</li>11     </ul>12 </div>

关于点击事件样式如下：

1 /*默认样式&点击后样式*/2 #title .select{3     color:#FFFFFF;4     background: #0AA770;5 }6 #content .show{7     display: block;8 }

默认样式如下:

JS代码：

 1  var tit=document.getElementById('title'); 2   var con=document.getElementById('content'); 3   var spans=tit.getElementsByTagName('span'); 4   var lis=con.getElementsByTagName('li'); 5   //第一个for循环 给每一个span绑定点击事件 6   for (var i = 0, len= spans.length; i < len; i++){ 7       spans[i].onclick=function(){ 8          //第二个for循环 遍历找出当前点击是的span 9          for (var j = 0,len= spans.length; j < len; j++) {10                 if (spans[j]==this) {11                     this.className='select';12                     // spans[v].className='select';//效果同上13                     lis[j].className='show';14                 } else {//若没被选中清空设置15                     spans[j].className='';16                     lis[j].className='';17                 }18          }19       }20   }

2、Tab切换简写版2

页面布局与默认样式设置与上面相同

JS代码：

 1 var tit=document.getElementById('title'); 2   var con=document.getElementById('content'); 3   var spans=tit.getElementsByTagName('span'); 4   var lis=con.getElementsByTagName('li'); 5   //第一个for循环 给每一个span绑定点击事件 6   for (var i = 0, len= spans.length; i < len; i++){ 7       spans[i].index=i;//不同处：获取当前点击事件的索引值为后面设置绑定对象使用 8       spans[i].onclick=function(){ 9          //第二个for循环 遍历找出当前点击是的span10          //清空所有的绑定对象11          for (var j = 0,len = spans.length; j < len;j++) {12              spans[j].className='';13             lis[j].className='';14          }15          //单独对点击事件绑定对象，索引值来自之前获取的16          this.className='select';17          lis[this.index].className='show';18       }19   }

0 0