javascript實(shí)現(xiàn)tab切換的兩個(gè)實(shí)例
更新時(shí)間：2015年11月05日 15:08:52 投稿：lijiao
這篇文章主要介紹了javascript實(shí)現(xiàn)tab切換的兩個(gè)實(shí)例，是對(duì)之前方法原理的進(jìn)一步延伸，需要深入了解的同學(xué)可以參考一下
上一篇《javascript實(shí)現(xiàn)tab切換的四種方法》中講了tab切換的4種不同實(shí)現(xiàn)原理，那么，現(xiàn)在到理論聯(lián)系實(shí)際的時(shí)候了，下面就寫(xiě)幾個(gè)實(shí)例。
一、仿”中國(guó)人民大學(xué)“官網(wǎng)的tab切換，背景是圖片，效果圖如下：
鼠標(biāo)移到新聞時(shí)的效果
鼠標(biāo)移到公告時(shí)的效果
鼠標(biāo)移到交流時(shí)的效果
學(xué)術(shù)、交流和文體的內(nèi)容為空，我沒(méi)有寫(xiě)。完整代碼如下：
<!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="中國(guó)人民大學(xué)開(kāi)展專題教育 弘揚(yáng)焦裕祿精神 踐行“三嚴(yán)三實(shí)”(2015-10-25)">中國(guó)人民大學(xué)開(kāi)展專題教育 弘揚(yáng)焦裕祿精神 踐行“三嚴(yán)三實(shí)”(2015-10-25)</a></p>
<p><a href="#">中國(guó)人民大學(xué)認(rèn)真落實(shí)黨風(fēng)廉政建設(shè)主體責(zé)任和監(jiān)督責(zé)任(2015-10-23)</a></p>
<p><a href="#">中國(guó)人民大學(xué)第四屆體育文化節(jié)開(kāi)幕 2015年新生運(yùn)動(dòng)會(huì)舉行(2015-10-18)</a></p>
<p><a href="#">中國(guó)人民大學(xué)“一帶一路”經(jīng)濟(jì)研究院首席顧問(wèn)聘任儀式舉行 土庫(kù)曼斯坦駐華大使拉</a></p>
</div>
<div>
<p><a>2015-2016學(xué)年第一學(xué)期第8周校領(lǐng)導(dǎo)接待日安排...(2015-10-22)</a></p>
<p><a>關(guān)于舉辦中國(guó)人民大學(xué)第二屆青年管理干部崗位技能競(jìng)賽的...(2015-09-30)</a></p>
<p><a>我校第十六門(mén)中國(guó)大學(xué)視頻公開(kāi)課上線，請(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)于舉辦中國(guó)人民大學(xué)第四屆教工羽毛球“1+1”團(tuán)體聯(lián)...(2015-10-23)</a></p>
<p><a>中國(guó)人民大學(xué)MOOCs課程錄制演播廳設(shè)備購(gòu)置項(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í)例是很簡(jiǎn)單也很常見(jiàn)的tab切換，js中多了一點(diǎn)的就是改變了背景圖片的位置，其他的就是簡(jiǎn)單的樣式。
二、用input:checked來(lái)實(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)簽語(yǔ)言</h2>
<p>HTML 是通向 WEB 技術(shù)世界的鑰匙。HTML 非常容易學(xué)習(xí)！你會(huì)喜歡它的！</p>
</div>
<div class="panel">
<h2>JavaScript腳本語(yǔ)言</h2>
<p>JavaScript 是世界上最流行的腳本語(yǔ)言。<br/>
JavaScript 是屬于 web 的語(yǔ)言，它適用于PC、筆記本電腦、平板電腦和移動(dòng)電話。<br/>
JavaScript 被設(shè)計(jì)為向 HTML 頁(yè)面增加交互性。
</p>
</div>
<div class="panel">
<h2>AJAX阿賈克斯</h2>
<p>AJAX = Asynchronous JavaScript and XML（異步的 JavaScript 和 XML）。<br/>
AJAX 不是新的編程語(yǔ)言，而是一種使用現(xiàn)有標(biāo)準(zhǔn)的新方法。<br/>
AJAX 是與服務(wù)器交換數(shù)據(jù)并更新部分網(wǎng)頁(yè)的藝術(shù)，在不重新加載整個(gè)頁(yè)面的情況下。
</p>
</div>
<div class="panel">
<h2>Sever Side服務(wù)器腳本</h2>
<p>SQL 是用于訪問(wèn)和處理數(shù)據(jù)庫(kù)的標(biāo)準(zhǔn)的計(jì)算機(jī)語(yǔ)言。<br/>
ASP 是創(chuàng)建動(dòng)態(tài)交互性網(wǎng)頁(yè)的強(qiáng)大工具。<br/>
ADO 指 ActiveX 數(shù)據(jù)對(duì)象（ActiveX Data Objects）。<br/>
PHP 是一種創(chuàng)建動(dòng)態(tài)交互性站點(diǎn)的強(qiáng)有力的服務(wù)器端腳本語(yǔ)言。<br/>
VBScript 是微軟公司出品的腳本語(yǔ)言。
</p>
</div>
</div>
</div>
</body>
</html>
您可能感興趣的文章:
- 微信小程序 swiper制作tab切換實(shí)現(xiàn)附源碼
- js中常用的Tab切換效果(推薦)
- jquery實(shí)現(xiàn)簡(jiǎn)單Tab切換菜單效果
- 最簡(jiǎn)單的tab切換實(shí)例代碼
- Android App中制作仿MIUI的Tab切換效果的實(shí)例分享
- jQuery+css實(shí)現(xiàn)的tab切換標(biāo)簽(兼容各瀏覽器)
- javascript實(shí)現(xiàn)tab切換的四種方法
- jquery實(shí)現(xiàn)初次打開(kāi)有動(dòng)畫(huà)效果的網(wǎng)頁(yè)TAB切換代碼
- jQuery實(shí)現(xiàn)帶延遲的二級(jí)tab切換下拉列表效果
- 幾種tab切換詳解
相關(guān)文章
本文主要分享了js實(shí)現(xiàn)功能比較全面的全選和多選的示例代碼，具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-03-03
這篇文章主要介紹了js如何設(shè)置緩存及獲取設(shè)置的緩存,需要的朋友可以參考下2014-05-05
在layui.use 中自定義 function 的正確方法
今天小編就為大家分享一篇在layui.use 中自定義 function 的正確方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09
JavaScript實(shí)現(xiàn)簡(jiǎn)易聊天對(duì)話框(加滾動(dòng)條)
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡(jiǎn)易聊天對(duì)話框，附加滾動(dòng)條功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-02-02
基于JQuery模仿蘋(píng)果桌面的Dock效果(初級(jí)版)
新的一天新的開(kāi)始，今天要分享的是用JQuery模仿蘋(píng)果操作系統(tǒng)桌面的Dock效果，之所以稱之為初級(jí)版，是因?yàn)槠渲羞€有一些bug，顯示效果并不穩(wěn)定2012-10-10
IE,firefox(火狐)瀏覽器無(wú)提示關(guān)閉窗口js實(shí)現(xiàn)代碼小結(jié)
在不是js打開(kāi)的頁(yè)面上按window.close()，會(huì)有提示框，很煩，現(xiàn)在可以不用了，沒(méi)有提示框直接關(guān)閉窗口。下面腳本之家編輯特為大家整理了一些。2009-09-09
AngularJs+Bootstrap實(shí)現(xiàn)漂亮的計(jì)算器
這篇文章主要為大家詳細(xì)介紹了angularJs+Bootstrap實(shí)現(xiàn)漂亮的計(jì)算器，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
Boostrap柵格系統(tǒng)與自己額外定義的媒體查詢的沖突問(wèn)題
這篇文章主要介紹了Boostrap柵格系統(tǒng)與自己額外定義的媒體查詢的沖突問(wèn)題,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-02-02
JS面向?qū)ο髮?shí)現(xiàn)飛機(jī)大戰(zhàn)
這篇文章主要為大家詳細(xì)介紹了JS面向?qū)ο髮?shí)現(xiàn)飛機(jī)大戰(zhàn)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-08-08
后臺(tái)獲取ZTREE選中節(jié)點(diǎn)的方法
這篇文章主要介紹了后臺(tái)獲取ZTREE選中節(jié)點(diǎn)的方法,實(shí)例分析了ZTREE中g(shù)etZTreeObj方法與getCheckedNodes方法的使用技巧,需要的朋友可以參考下2015-02-02