JavaScript学习笔记2之Tab切换

1、Tab切换简写版1

页面布局如下：

 <div id="tab">
      <h1 id="title">
         <span class="select">标题一</span>
         <span>标题二</span>
         <span>标题三</span>
     </h1>
     <ul id="content">
         <li class="show">内容一</li>
         <li>内容二</li>
         <li>内容三</li>
     </ul>
 </div>                    

关于点击事件样式如下：

 /*默认样式&点击后样式*/
 #title .select{
     color:#FFFFFF;
     background: #0AA770;
 }
 #content .show{
     display: block;
 }

默认样式如下:

JS代码：

  var tit=document.getElementById('title');
   var con=document.getElementById('content');
   var spans=tit.getElementsByTagName('span');
   var lis=con.getElementsByTagName('li');
   //第一个for循环 给每一个span绑定点击事件
   for (var i = 0, len= spans.length; i < len; i++){
       spans[i].onclick=function(){
          //第二个for循环 遍历找出当前点击是的span
          for (var j = 0,len= spans.length; j < len; j++) {
                 if (spans[j]==this) {
                     this.className='select';
                     // spans[v].className='select';//效果同上
                     lis[j].className='show';
                 } else {//若没被选中清空设置
                     spans[j].className='';
                     lis[j].className='';
                 }
          }
       }
   }

2、Tab切换简写版2

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

JS代码：

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