1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 5 <title>选项卡切换</title> 6 <style> 7 .active{background:red;} 8 div{width:100px;height:100px;background:#0000FF;display:none;} 9 input{background:#CCCCCC;} 10 </style> 11 <script> 12 window.onload=function(){ 13 var ainput=document.getElementsByTagName('input'); 14 var odiv=document.getElementsByTagName('div'); 15 var i=0; 16 for(i=0;i<ainput.length;i++){ 17 ainput[i].index=i; 18 ainput[i].onclick=function() 19 { 20 for(i=0;i<ainput.length;i++){ 21 ainput[i].className=''; 22 odiv[i].style.display='none'; 23 } 24 odiv[this.index].style.display='block'; 25 this.className='active'; 26 }; 27 } 28 }; 29 </script> 30 </head> 31 <body> 32 <input class="active" type="button" value="one"/> 33 <input type="button" value="two" /> 34 <input type="button" value="three"/> 35 <div style="display:block;">我是第一个</div> 36 <div>我是第二个</div> 37 <div>我是第三个</div> 38 </body> 39 </html>
这个是选项卡的切换原理，做的一个简单的例子。选项卡的应用很广泛，每个标签的切换修改的只是display值，比较容易理解。通过循环来遍历获取标签，然后复制给每一个标签。
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 5 <title>this</title> 6 <script type="text/javascript"> 7 window.onload=function(){ 8 var abtn=document.getElementsByTagName('input'); 9 var i=0; 10 for(i=0;i<abtn.length;i++) 11 { abtn[i].onclick=function(){ 12 alert(this.value); 13 }; 14 } 15 }; 16 </script> 17 </head> 18 <body> 19 <input type="button" value="China"/> 20 <input type="button" value="Hongkong"/> 21 <input type="button" value="Wuhan"/> 22 </body> 23 </html>
这个是当你点击一个按钮的时候，this的应用范围很广泛，浏览器就弹出相应的按钮的标签文本值。
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 5 <title>全选</title> 6 </head> 7 <script type="text/javascript"> 8 window.onload=function(){ 9 var obtn=document.getElementById('btn'); 10 var ainput=document.getElementsByTagName('input'); 11 var i=0; 12 obtn.onclick=function(){ 13 for(i=0;i<ainput.length;i++) 14 { 15 ainput[i].checked=true; 16 } 17 }; 18 }; 19 </script> 20 <body> 21 <p id="btn">全选</p> 22 <input type="checkbox" /><br /> 23 <input type="checkbox" /><br /> 24 <input type="checkbox" /><br /> 25 <input type="checkbox" /><br /> 26 <input type="checkbox" /><br /> 27 <input type="checkbox" /><br /> 28 <input type="checkbox" /><br /> 29 <input type="checkbox" /><br /> 30 <input type="checkbox" /><br /> 31 <input type="checkbox" /><br /><input type="checkbox" /><br /> 32 </body> 33 </html>
这个是一个全选的的功能，checked就是当你选中的时候。比较简单，有兴趣的同学可以试着做一下，都很基础。晚安~