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';
      }
  }