JavaScript学习笔记2之Tab切换

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循环 遍历找出当前点击是的span
10          //清空所有的绑定对象
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   }