javascript實(shí)現(xiàn)tab切換的兩個(gè)實(shí)例
上一篇《javascript實(shí)現(xiàn)tab切換的四種方法》中講了tab切換的4種不同實(shí)現(xiàn)原理,那么,現(xiàn)在到理論聯(lián)系實(shí)際的時(shí)候了,下面就寫幾個(gè)實(shí)例。
一、仿”中國人民大學(xué)“官網(wǎng)的tab切換,背景是圖片,效果圖如下:
鼠標(biāo)移到新聞時(shí)的效果
鼠標(biāo)移到公告時(shí)的效果
鼠標(biāo)移到交流時(shí)的效果
學(xué)術(shù)、交流和文體的內(nèi)容為空,我沒有寫。完整代碼如下:
<!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="#">學(xué)術(shù)</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="#">塞浦路斯總統(tǒng)尼科斯·阿納斯塔西亞迪斯到訪人民大學(xué) 獲...</a></p> <p><a href="#" title="中國人民大學(xué)開展專題教育 弘揚(yáng)焦裕祿精神 踐行“三嚴(yán)三實(shí)”(2015-10-25)">中國人民大學(xué)開展專題教育 弘揚(yáng)焦裕祿精神 踐行“三嚴(yán)三實(shí)”(2015-10-25)</a></p> <p><a href="#">中國人民大學(xué)認(rèn)真落實(shí)黨風(fēng)廉政建設(shè)主體責(zé)任和監(jiān)督責(zé)任(2015-10-23)</a></p> <p><a href="#">中國人民大學(xué)第四屆體育文化節(jié)開幕 2015年新生運(yùn)動(dòng)會(huì)舉行(2015-10-18)</a></p> <p><a href="#">中國人民大學(xué)“一帶一路”經(jīng)濟(jì)研究院首席顧問聘任儀式舉行 土庫曼斯坦駐華大使拉</a></p> </div> <div> <p><a>2015-2016學(xué)年第一學(xué)期第8周校領(lǐng)導(dǎo)接待日安排...(2015-10-22)</a></p> <p><a>關(guān)于舉辦中國人民大學(xué)第二屆青年管理干部崗位技能競賽的...(2015-09-30)</a></p> <p><a>我校第十六門中國大學(xué)視頻公開課上線,請(qǐng)大家積極關(guān)注...(2015-10-26)</a></p> <p><a>關(guān)于組織我校青年教師參觀魯迅博物館社會(huì)實(shí)踐活動(dòng)的通知...(2015-10-23)</a></p> <p><a>關(guān)于舉辦中國人民大學(xué)第四屆教工羽毛球“1+1”團(tuán)體聯(lián)...(2015-10-23)</a></p> <p><a>中國人民大學(xué)MOOCs課程錄制演播廳設(shè)備購置項(xiàng)目中標(biāo)...(2015-10-23)</a></p> </div> <div>內(nèi)容三</div> <div>內(nèi)容四</div> <div>內(nèi)容五</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>
此實(shí)例是很簡單也很常見的tab切換,js中多了一點(diǎn)的就是改變了背景圖片的位置,其他的就是簡單的樣式。
二、用input:checked來實(shí)現(xiàn)tab切換效果,現(xiàn)在就用此原理加上css3做一個(gè)漂亮的實(shí)例,在切換的時(shí)候,內(nèi)容區(qū)是漸現(xiàn)的。效果圖如下:
鼠標(biāo)點(diǎn)擊HTML/CSS時(shí)的效果
鼠標(biāo)點(diǎn)擊AJAX時(shí)的效果
完整代碼如下:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>input:checked實(shí)現(xiàn)tab切換</title> <style> .tabs{ color: #FFF; font-family: "微軟雅黑"; } input{ opacity: 0;/*隱藏input的選擇框*/ } input:checked+label{ padding-bottom: 6px; font-weight: bold; } label{ cursor: pointer;/*鼠標(biāo)移上去變成手狀*/ 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;/*使內(nèi)容區(qū)域位置一樣*/ 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文本標(biāo)簽語言</h2> <p>HTML 是通向 WEB 技術(shù)世界的鑰匙。HTML 非常容易學(xué)習(xí)!你會(huì)喜歡它的!</p> </div> <div class="panel"> <h2>JavaScript腳本語言</h2> <p>JavaScript 是世界上最流行的腳本語言。<br/> JavaScript 是屬于 web 的語言,它適用于PC、筆記本電腦、平板電腦和移動(dòng)電話。<br/> JavaScript 被設(shè)計(jì)為向 HTML 頁面增加交互性。 </p> </div> <div class="panel"> <h2>AJAX阿賈克斯</h2> <p>AJAX = Asynchronous JavaScript and XML(異步的 JavaScript 和 XML)。<br/> AJAX 不是新的編程語言,而是一種使用現(xiàn)有標(biāo)準(zhǔn)的新方法。<br/> AJAX 是與服務(wù)器交換數(shù)據(jù)并更新部分網(wǎng)頁的藝術(shù),在不重新加載整個(gè)頁面的情況下。 </p> </div> <div class="panel"> <h2>Sever Side服務(wù)器腳本</h2> <p>SQL 是用于訪問和處理數(shù)據(jù)庫的標(biāo)準(zhǔn)的計(jì)算機(jī)語言。<br/> ASP 是創(chuàng)建動(dòng)態(tài)交互性網(wǎng)頁的強(qiáng)大工具。<br/> ADO 指 ActiveX 數(shù)據(jù)對(duì)象(ActiveX Data Objects)。<br/> PHP 是一種創(chuàng)建動(dòng)態(tài)交互性站點(diǎn)的強(qiáng)有力的服務(wù)器端腳本語言。<br/> VBScript 是微軟公司出品的腳本語言。 </p> </div> </div> </div> </body> </html>
- 微信小程序 swiper制作tab切換實(shí)現(xiàn)附源碼
- js中常用的Tab切換效果(推薦)
- jquery實(shí)現(xiàn)簡單Tab切換菜單效果
- 最簡單的tab切換實(shí)例代碼
- Android App中制作仿MIUI的Tab切換效果的實(shí)例分享
- jQuery+css實(shí)現(xiàn)的tab切換標(biāo)簽(兼容各瀏覽器)
- javascript實(shí)現(xiàn)tab切換的四種方法
- jquery實(shí)現(xiàn)初次打開有動(dòng)畫效果的網(wǎng)頁TAB切換代碼
- jQuery實(shí)現(xiàn)帶延遲的二級(jí)tab切換下拉列表效果
- 幾種tab切換詳解
相關(guān)文章
TopList標(biāo)簽和JavaScript結(jié)合兩例
TopList標(biāo)簽和JavaScript結(jié)合兩例...2007-08-08JavaScript常用的返回,自動(dòng)跳轉(zhuǎn),刷新,關(guān)閉語句匯總
這篇文章主要介紹了JavaScript常用的返回,自動(dòng)跳轉(zhuǎn),刷新,關(guān)閉語句,實(shí)例匯總了常用的javascript技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-01-01通過構(gòu)造函數(shù)實(shí)例化對(duì)象的方法
下面小編就為大家?guī)硪黄ㄟ^構(gòu)造函數(shù)實(shí)例化對(duì)象的方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-06-06如何讓動(dòng)態(tài)插入的javascript腳本代碼跑起來。
如何讓動(dòng)態(tài)插入的javascript腳本代碼跑起來。...2007-01-01JavaScript實(shí)現(xiàn)算術(shù)平方根算法-代碼超簡單
實(shí)現(xiàn)算術(shù)平方根的方法有很多種,本文是通過JavaScript實(shí)現(xiàn)的算術(shù)平方根算法,代碼超簡單,超管用,感興趣的朋友跟著腳本之家的小編一起學(xué)習(xí)吧2015-09-09利用JavaScript實(shí)現(xiàn)簡單3D開關(guān)書本模型
這篇文章主要為大家詳細(xì)介紹了如何利用JavaScript實(shí)現(xiàn)簡單3D開關(guān)書本模型的效果,文中的實(shí)現(xiàn)代碼講解的非常詳細(xì),具有一定參考價(jià)值,感興趣的同學(xué)可以動(dòng)手嘗試一下2023-11-11JavaScript Array擴(kuò)展實(shí)現(xiàn)代碼
最近看了一下developer.mozilla.org里的東西,發(fā)現(xiàn)它為Array對(duì)象添加了不少generic method,趕得上Prototype的熱心程度。2009-10-10