首頁 > 開發者 > JavaScript
javascript實現tab切換的兩個執行個體，javascripttab
上一篇《javascript實現tab切換的四種方法》中講了tab切換的4種不同實現原理，那麼，現在到理論聯絡實際的時候了，下面就寫幾個執行個體。
一、仿”中國人民大學“官網的tab切換，背景是圖片，如下：
滑鼠移到新聞時的效果
滑鼠移到公告時的效果
滑鼠移到交流時的效果
學術、交流和文體的內容為空白，我沒有寫。完整代碼如下：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> *{ padding: 0; margin: 0; } body{ font-family: Arial,Verdana,sans-serif,"宋體"; } li{ list-style: none; float:left; } a{ text-decoration: none; color: #ffeec6; } #tanContainer{ height: 210px; width: 470px; background: url(homeinfo-trans-bg.png); overflow: hidden; color: #ffeec6; } #tanContainer li a{ height: 25px; display: inline-block; margin-left: 18px; font-size: 12px; padding-top: 12px; margin-bottom: 15px; } ul li a.fli { } #tabOne{ width: 122px; opacity: 0; } #tabTwo{ padding-left: 102px; } #tabCon { clear: both; } #tabCon p a{ color: #FFF2D5; } div div p{ font-size: 12px; margin: 10px 0 0 20px; width: 440px; } #bigPara{ font-size: 16px; color: #FFF2D5; border-bottom: 1px dotted #FFF2D5; padding-bottom: 5px; } #tabCon div { display:none; } #tabCon div.fdiv { display:block; } </style> </head> <body> <div id="tanContainer"> <div id="tab"> <ul> <li><a class="fli" href="#" id="tabOne">新聞</a></li> <li><a href="#" id="tabTwo">公告</a></li> <li><a href="#">學術</a></li> <li><a href="#">交流</a></li> <li><a href="#">文體</a></li> </ul> </div> <div id="tabCon"> <div class="fdiv"> <p id="bigPara"><a href="#">塞浦路斯總統尼科斯·阿納斯塔西亞迪斯到訪人民大學 獲...</a></p> <p><a href="#" title="中國人民大學開展專題教育 弘揚焦裕祿精神 踐行“三嚴三實”(2015-10-25)">中國人民大學開展專題教育 弘揚焦裕祿精神 踐行“三嚴三實”(2015-10-25)</a></p> <p><a href="#">中國人民大學認真落實黨風廉政建設主體責任和監督責任(2015-10-23)</a></p> <p><a href="#">中國人民大學第四屆體育文化節開幕 2015年新生運動會舉行(2015-10-18)</a></p> <p><a href="#">中國人民大學“一帶一路”經濟研究院首席顧問聘任儀式舉行 土庫曼駐華大使拉</a></p> </div> <div> <p><a>2015-2016學年第一學期第8周校領導接待日安排...(2015-10-22)</a></p> <p><a>關於舉辦中國人民大學第二屆青年管理幹部崗位技能競賽的...(2015-09-30)</a></p> <p><a>我校第十六門中國大學視頻公開課上線，請大家積極關注...(2015-10-26)</a></p> <p><a>關於組織我校青年教師參觀魯迅博物館社會實踐活動的通知...(2015-10-23)</a></p> <p><a>關於舉辦中國人民大學第四屆教工羽毛球“1+1”團體聯...(2015-10-23)</a></p> <p><a>中國人民大學MOOCs課程錄製演播廳裝置購置項目中標...(2015-10-23)</a></p> </div> <div>內容三</div> <div>內容四</div> <div>內容五</div> </div> </div> </body> <script> var tabs=document.getElementById("tab").getElementsByTagName("li"); var divs=document.getElementById("tabCon").getElementsByTagName("div"); for(var i=0;i<tabs.length;i++){ tabs[i].onmouseover=function(){change(this);} } function change(obj){ for(var i=0;i<tabs.length;i++){ if(tabs[i]==obj){ tabs[i].className="fli"; divs[i].className="fdiv"; if(i==0){ document.getElementById("tanContainer").style.backgroundPosition="0 0" }else{ document.getElementById("tanContainer").style.backgroundPosition="0 -210px" } }else{ tabs[i].className=""; divs[i].className=""; } } } </script> </html>
此執行個體是很簡單也很常見的tab切換，js中多了一點的就是改變了背景圖片的位置，其他的就是簡單的樣式。
二、用input:checked來實現tab轉場效果，現在就用此原理加上css3做一個漂亮的執行個體，在切換的時候，內容區是漸現的。如下：
滑鼠點擊HTML/CSS時的效果
滑鼠點擊AJAX時的效果
完整代碼如下：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>input:checked實現tab切換</title> <style> .tabs{ color: #FFF; font-family: "微軟雅黑"; } input{ opacity: 0;/*隱藏input的選擇框*/ } input:checked+label{ padding-bottom: 6px; font-weight: bold; } label{ cursor: pointer;/*滑鼠移上去變成手狀*/ float: left; width: 120px; line-height: 40px; margin-right: 5px; text-align: center; } .tabs label:nth-of-type(1){ background: #5eb0de; } .tabs label:nth-of-type(2){ background: #86cad7; } .tabs label:nth-of-type(3){ background: #e9bab3; } .tabs label:nth-of-type(4){ background: #a8c194; } label:hover{ font-weight: bold; } /*選擇前面有.tabs input:nth-of-type(x):checked的.panels .panel:nth-child(x)*/ .tabs input:nth-of-type(1):checked~.panels .panel:nth-child(1){ opacity: 1; background: #5eb0de; -webkit-transition: .3s; } .tabs input:nth-of-type(2):checked~.panels .panel:nth-child(2){ opacity: 1; background: #86cad7; -webkit-transition: .3s; } .tabs input:nth-of-type(3):checked~.panels .panel:nth-child(3){ opacity: 1; background: #e9bab3; -webkit-transition: .3s; } .tabs input:nth-of-type(4):checked~.panels .panel:nth-child(4){ opacity: 1; background: #a8c194; -webkit-transition: .3s; } .panel{ opacity: 0; position: absolute;/*使內容地區位置一樣*/ height: 200px; width: 455px; margin-top: 25px; padding: 0 20px; } </style> </head> <body> <div class="tabs"> <input checked id="one" name="tabs" type="radio"> <label for="one">HTML/CSS</label> <input id="two" name="tabs" type="radio"> <label for="two">JavaScript</label> <input id="three" name="tabs" type="radio"> <label for="three">AJAX</label> <input id="four" name="tabs" type="radio"> <label for="four">Sever Side</label> <div class="panels"> <div class="panel"> <h2>HTML文字標籤語言</h2> <p>HTML 是通向 WEB 技術世界的鑰匙。HTML 非常容易學習！你會喜歡它的！</p> </div> <div class="panel"> <h2>JavaScript指令碼語言</h2> <p>JavaScript 是世界上最流行的指令碼語言。<br/> JavaScript 是屬於 web 的語言，它適用於PC、膝上型電腦、平板電腦和行動電話。<br/> JavaScript 被設計為向 HTML 頁面增加互動性。 </p> </div> <div class="panel"> <h2>AJAX阿賈克斯</h2> <p>AJAX = Asynchronous JavaScript and XML（非同步 JavaScript 和 XML）。<br/> AJAX 不是新的程式設計語言，而是一種使用現有標準的新方法。<br/> AJAX 是與伺服器交換資料並更新部分網頁的藝術，在不重新載入整個頁面的情況下。 </p> </div> <div class="panel"> <h2>Sever Side伺服器指令碼</h2> <p>SQL 是用於訪問和處理資料庫的標準的電腦語言。<br/> ASP 是建立動態互動性網頁的強大工具。<br/> ADO 指 ActiveX 資料對象（ActiveX Data Objects）。<br/> PHP 是一種建立動態互動性網站的強有力的伺服器端指令碼語言。<br/> VBScript 是微軟公司出品的指令碼語言。 </p> </div> </div> </div> </body> </html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
