javascript實現(xiàn)tab切換的兩個實例

更新時間：2015年11月05日 15:08:52 投稿：lijiao

這篇文章主要介紹了javascript實現(xiàn)tab切換的兩個實例，是對之前方法原理的進一步延伸，需要深入了解的同學可以參考一下

上一篇《javascript實現(xiàn)tab切換的四種方法》中講了tab切換的4種不同實現(xiàn)原理，那么，現(xiàn)在到理論聯(lián)系實際的時候了，下面就寫幾個實例。

一、仿”中國人民大學“官網(wǎng)的tab切換，背景是圖片，效果圖如下：

鼠標移到新聞時的效果

鼠標移到公告時的效果

鼠標移到交流時的效果

學術、交流和文體的內(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="#">學術</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)尼科斯·阿納斯塔西亞迪斯到訪人民大學 獲...</a></p>
 <p><a href="#" title="中國人民大學開展專題教育 弘揚焦裕祿精神 踐行“三嚴三實”(2015-10-25)">中國人民大學開展專題教育 弘揚焦裕祿精神 踐行“三嚴三實”(2015-10-25)</a></p>
 <p><a href="#">中國人民大學認真落實黨風廉政建設主體責任和監(jiān)督責任(2015-10-23)</a></p>
 <p><a href="#">中國人民大學第四屆體育文化節(jié)開幕 2015年新生運動會舉行(2015-10-18)</a></p>
 <p><a href="#">中國人民大學“一帶一路”經(jīng)濟研究院首席顧問聘任儀式舉行 土庫曼斯坦駐華大使拉</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”團體聯(lián)...(2015-10-23)</a></p>
 <p><a>中國人民大學MOOCs課程錄制演播廳設備購置項目中標...(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>

此實例是很簡單也很常見的tab切換，js中多了一點的就是改變了背景圖片的位置，其他的就是簡單的樣式。

二、用input:checked來實現(xiàn)tab切換效果，現(xiàn)在就用此原理加上css3做一個漂亮的實例，在切換的時候，內(nèi)容區(qū)是漸現(xiàn)的。效果圖如下：

鼠標點擊HTML/CSS時的效果

鼠標點擊AJAX時的效果

完整代碼如下：

 <!DOCTYPE html>
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>input:checked實現(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;/*鼠標移上去變成手狀*/
 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文本標簽語言</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 不是新的編程語言，而是一種使用現(xiàn)有標準的新方法。<br/>
 AJAX 是與服務器交換數(shù)據(jù)并更新部分網(wǎng)頁的藝術，在不重新加載整個頁面的情況下。
 </p>
 </div>
 
 <div class="panel">
 <h2>Sever Side服務器腳本</h2>
 <p>SQL 是用于訪問和處理數(shù)據(jù)庫的標準的計算機語言。<br/>
 ASP 是創(chuàng)建動態(tài)交互性網(wǎng)頁的強大工具。<br/>
 ADO 指 ActiveX 數(shù)據(jù)對象（ActiveX Data Objects）。<br/>
 PHP 是一種創(chuàng)建動態(tài)交互性站點的強有力的服務器端腳本語言。<br/>
 VBScript 是微軟公司出品的腳本語言。
 </p>
 </div>
 
 </div>
 </div>
 </body>
 </html>

您可能感興趣的文章: