上一篇《論tab切換的幾種實現方法》中講了tab切換的4種不同實現原理，那么，現在到理論聯系實際的時候了，下面就寫幾個實例。
一、仿”中國人民大學“官網的tab切換，背景是圖片，效果圖如下：
鼠標移到新聞時的效果
鼠標移到公告時的效果
鼠標移到交流時的效果
學術、交流和文體的內容為空，我沒有寫。完整代碼如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <style> 6 *{ 7 padding: 0; 8 margin: 0; 9 } 10 body{ 11 font-family: Arial,Verdana,sans-serif,"宋體"; 12 } 13 li{ 14 list-style: none; 15 float:left; 16 } 17 a{ 18 text-decoration: none; 19 color: #ffeec6; 20 } 21 #tanContainer{ 22 height: 210px; 23 width: 470px; 24 background: url(homeinfo-trans-bg.png); 25 overflow: hidden; 26 color: #ffeec6; 27 } 28 #tanContainer li a{ 29 height: 25px; 30 display: inline-block; 31 margin-left: 18px; 32 font-size: 12px; 33 padding-top: 12px; 34 margin-bottom: 15px; 35 } 36 ul li a.fli { 37 } 38 #tabOne{ 39 width: 122px; 40 opacity: 0; 41 } 42 #tabTwo{ 43 padding-left: 102px; 44 } 45 #tabCon { 46 clear: both; 47 } 48 #tabCon p a{ 49 color: #FFF2D5; 50 } 51 div div p{ 52 font-size: 12px; 53 margin: 10px 0 0 20px; 54 width: 440px; 55 } 56 #bigPara{ 57 font-size: 16px; 58 color: #FFF2D5; 59 border-bottom: 1px dotted #FFF2D5; 60 padding-bottom: 5px; 61 } 62 #tabCon div { 63 display:none; 64 } 65 #tabCon div.fdiv { 66 display:block; 67 } 68 </style> 69 </head> 70 <body> 71 <div id="tanContainer"> 72 <div id="tab"> 73 <ul> 74 <li><a class="fli" href="#" id="tabOne">新聞</a></li> 75 <li><a href="#" id="tabTwo">公告</a></li> 76 <li><a href="#">學術</a></li> 77 <li><a href="#">交流</a></li> 78 <li><a href="#">文體</a></li> 79 </ul> 80 </div> 81 <div id="tabCon"> 82 <div class="fdiv"> 83 <p id="bigPara"><a href="#">塞浦路斯總統尼科斯·阿納斯塔西亞迪斯到訪人民大學 獲...</a></p> 84 <p><a href="#" title="中國人民大學開展專題教育 弘揚焦裕祿精神 踐行“三嚴三實”(2015-10-25)">中國人民大學開展專題教育 弘揚焦裕祿精神 踐行“三嚴三實”(2015-10-25)</a></p> 85 <p><a href="#">中國人民大學認真落實黨風廉政建設主體責任和監督責任(2015-10-23)</a></p> 86 <p><a href="#">中國人民大學第四屆體育文化節開幕 2015年新生運動會舉行(2015-10-18)</a></p> 87 <p><a href="#">中國人民大學“一帶一路”經濟研究院首席顧問聘任儀式舉行 土庫曼斯坦駐華大使拉</a></p> 88 89 </div> 90 <div> 91 <p><a>2015-2016學年第一學期第8周校領導接待日安排...(2015-10-22)</a></p> 92 <p><a>關於舉辦中國人民大學第二屆青年管理干部崗位技能競賽的...(2015-09-30)</a></p> 93 <p><a>我校第十六門中國大學視頻公開課上線，請大家積極關注...(2015-10-26)</a></p> 94 <p><a>關於組織我校青年教師參觀魯迅博物館社會實踐活動的通知...(2015-10-23)</a></p> 95 <p><a>關於舉辦中國人民大學第四屆教工羽毛球“1+1”團體聯...(2015-10-23)</a></p> 96 <p><a>中國人民大學MOOCs課程錄制演播廳設備購置項目中標...(2015-10-23)</a></p> 97 </div> 98 <div>內容三</div> 99 <div>內容四</div> 100 <div>內容五</div> 101 </div> 102 </div> 103 </body> 104 <script> 105 var tabs=document.getElementById("tab").getElementsByTagName("li"); 106 var divs=document.getElementById("tabCon").getElementsByTagName("div"); 107 108 for(var i=0;i<tabs.length;i++){ 109 tabs[i].onmouseover=function(){change(this);} 110 } 111 112 function change(obj){ 113 for(var i=0;i<tabs.length;i++){ 114 if(tabs[i]==obj){ 115 tabs[i].className="fli"; 116 divs[i].className="fdiv"; 117 if(i==0){ 118 document.getElementById("tanContainer").style.backgroundPosition="0 0" 119 }else{ 120 document.getElementById("tanContainer").style.backgroundPosition="0 -210px" 121 } 122 }else{ 123 tabs[i].className=""; 124 divs[i].className=""; 125 } 126 } 127 } 128 </script> 129 </html>
此實例是很簡單也很常見的tab切換，js中多了一點的就是改變了背景圖片的位置，其他的就是簡單的樣式。
二、上一篇講了不用js，用input:checked來實現tab切換效果，現在就用此原理加上css3做一個漂亮的實例，在切換的時候，內容區是漸現的。效果圖如下：
鼠標點擊HTML/CSS時的效果
鼠標點擊AJAX時的效果
完整代碼如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>input:checked實現tab切換</title> 6 <style> 7 .tabs{ 8 color: #FFF; 9 font-family: "微軟雅黑"; 10 } 11 input{ 12 opacity: 0;/*隱藏input的選擇框*/ 13 } 14 input:checked+label{ 15 padding-bottom: 6px; 16 font-weight: bold; 17 } 18 label{ 19 cursor: pointer;/*鼠標移上去變成手狀*/ 20 float: left; 21 22 width: 120px; 23 line-height: 40px; 24 margin-right: 5px; 25 text-align: center; 26 } 27 .tabs label:nth-of-type(1){ 28 background: #5eb0de; 29 } 30 .tabs label:nth-of-type(2){ 31 background: #86cad7; 32 } 33 .tabs label:nth-of-type(3){ 34 background: #e9bab3; 35 } 36 .tabs label:nth-of-type(4){ 37 background: #a8c194; 38 } 39 label:hover{ 40 font-weight: bold; 41 } 42 /*選擇前面有.tabs input:nth-of-type(x):checked的.panels .panel:nth-child(x)*/ 43 .tabs input:nth-of-type(1):checked~.panels .panel:nth-child(1){ 44 opacity: 1; 45 background: #5eb0de; 46 -webkit-transition: .3s; 47 } 48 .tabs input:nth-of-type(2):checked~.panels .panel:nth-child(2){ 49 opacity: 1; 50 background: #86cad7; 51 -webkit-transition: .3s; 52 } 53 .tabs input:nth-of-type(3):checked~.panels .panel:nth-child(3){ 54 opacity: 1; 55 background: #e9bab3; 56 -webkit-transition: .3s; 57 } 58 .tabs input:nth-of-type(4):checked~.panels .panel:nth-child(4){ 59 opacity: 1; 60 background: #a8c194; 61 -webkit-transition: .3s; 62 } 63 .panel{ 64 opacity: 0; 65 position: absolute;/*使內容區域位置一樣*/ 66 67 height: 200px; 68 width: 455px; 69 margin-top: 25px; 70 padding: 0 20px; 71 } 72 </style> 73 </head> 74 <body> 75 <div class="tabs"> 76 <input checked id="one" name="tabs" type="radio"> 77 <label for="one">HTML/CSS</label> 78 79 <input id="two" name="tabs" type="radio"> 80 <label for="two">JavaScript</label> 81 82 <input id="three" name="tabs" type="radio"> 83 <label for="three">AJAX</label> 84 85 <input id="four" name="tabs" type="radio"> 86 <label for="four">Sever Side</label> 87 88 <div class="panels"> 89 <div class="panel"> 90 <h2>HTML文本標簽語言</h2> 91 <p>HTML 是通向 WEB 技術世界的鑰匙。HTML 非常容易學習！你會喜歡它的！</p> 92 </div> 93 94 <div class="panel"> 95 <h2>JavaScript腳本語言</h2> 96 <p>JavaScript 是世界上最流行的腳本語言。<br/> 97 JavaScript 是屬於 web 的語言，它適用於PC、筆記本電腦、平板電腦和移動電話。<br/> 98 JavaScript 被設計為向 HTML 頁面增加交互性。 99 </p> 100 </div> 101 102 <div class="panel"> 103 <h2>AJAX阿賈克斯</h2> 104 <p>AJAX = Asynchronous JavaScript and XML（異步的 JavaScript 和 XML）。<br/> 105 AJAX 不是新的編程語言，而是一種使用現有標准的新方法。<br/> 106 AJAX 是與服務器交換數據並更新部分網頁的藝術，在不重新加載整個頁面的情況下。 107 </p> 108 </div> 109 110 <div class="panel"> 111 <h2>Sever Side服務器腳本</h2> 112 <p>SQL 是用於訪問和處理數據庫的標准的計算機語言。<br/> 113 ASP 是創建動態交互性網頁的強大工具。<br/> 114 ADO 指 ActiveX 數據對象（ActiveX Data Objects）。<br/> 115 PHP 是一種創建動態交互性站點的強有力的服務器端腳本語言。<br/> 116 VBScript 是微軟公司出品的腳本語言。 117 </p> 118 </div> 119 120 </div> 121 </div> 122 </body> 123 </html>