JavaScript原生タブ作成に新浪タブ付き判例

通常のタブの作成過程をまとめます.
HTML構造コード:

大きな箱に一つのulと四つのdivを包んでいます.そして、liに独特のスタイルを設定しています.liが始まったばかりの時に、一つはユニークです.残りのboxの中の四つのdivはボタンとして上のliに対応しています.
CSSスタイルコード:

すべてのスタイルの外側と内側の余白をクリアし、すべての無秩序リストの前の小さな番号を含む.そして、大きなボックスボックスボックスボックスボックスボックスボックスの幅の高い中央に配置する.

			/*        */
			1.#box         
			2.  #box     div  
			3.     li       

JavaScriptコード部分:

	window.οnlοad=function (){                          //           
		var oBox=document.getElementById('box');		//       
		var oTit  =document.getElementById('title');    //  ul
		var aDiv =oBox.getElementsByTagName('div');		//         box   div
		var aBtn =oTit.getElementsByTagName('li');		//         ul   li

		for(var i=0;i<aBtn.length;i++){                 //for       aBtn <  >    li
			aBtn[i].index=i;							//   aDiv    index<             >      aBtn [  ]  index    i[  ]
			aBtn[i].οnclick=function (){				//              aBtn   
				for(var j=0;j<aBtn.length;j++){			//  aBtn     <                     >
					aBtn[j].className='';				//    aBtn              
					aDiv[j].style.display='none';       //    div                
				}
				this.className='active';				//   css    active<        >
				aDiv[this.index].style.display='block'; //aDiv[   .  /  ]      
			};
		}
	};
		

以下はすべてのコード統合です.

	
		
		
		
		
		
		
			window.οnlοad=function (){                          //           
				var oBox=document.getElementById('box');		//       
				var oTit  =document.getElementById('title');    //  ul
				var aDiv =oBox.getElementsByTagName('div');		//         box   div
				var aBtn =oTit.getElementsByTagName('li');		//         ul   li
		
				for(var i=0;i<aBtn.length;i++){                 //for       aBtn <  >    li
					aBtn[i].index=i;							//   aDiv    index<             >      aBtn [  ]  index    i[  ]
					aBtn[i].οnclick=function (){				//              aBtn   
						for(var j=0;j<aBtn.length;j++){			//  aBtn     <                     >
							aBtn[j].className='';				//    aBtn              
							aDiv[j].style.display='none';       //    div                
						}
						this.className='active';				//   css    active<        >
						aDiv[this.index].style.display='block'; //aDiv[   .  /  ]      
					};
				}
			};
		
	
	
	
		

			

				
  
				
  
				
  
				
  
			
			
  
			
  
			
  
			
  
		
	

以下は新浪の当面の1つのタブの効果です.

	
		
		
		
		
			window.οnlοad=function (){
				var oTitle=document.getElementById('title')
				var aBtn=oTitle.getElementsByTagName('li');
				var oBox=document.getElementById('box');
				var aDiv=oBox.getElementsByTagName('div');
				
				for(var i=0;i<aBtn.length;i++){
					aBtn[i].index=i;
					aBtn[i].οnmοuseοver=function (){      //bug
						for(var j=0;j<aBtn.length;j++){
							aBtn[j].className='';
							aDiv[j].style.display='none';
						}
						this.className='active';
						aDiv[this.index].style.display='block';
					};
				}
			};
		
	
	
		

			

				
  
				
コラム
				
ホットスポット
			
			
  
			
  
			
  
		
	

                      周秦卿