js實(shí)現(xiàn)簡(jiǎn)單的可切換選項(xiàng)卡效果

當(dāng)前位置：首頁(yè) > 范文|應(yīng)用文 > IT技術(shù)專欄 > 腳本欄目

來源：易賢網(wǎng) 閱讀：2681 次日期：2015-04-13 13:46:35

溫馨提示：易賢網(wǎng)小編為您整理了“js實(shí)現(xiàn)簡(jiǎn)單的可切換選項(xiàng)卡效果”,方便廣大網(wǎng)友查閱！

如圖，最簡(jiǎn)單的純粹的選項(xiàng)卡

js實(shí)現(xiàn)簡(jiǎn)單的可切換選項(xiàng)卡效果三聯(lián)

第一步，當(dāng)然是先寫html代碼和css樣式

<!DOCTYPE html>

<html>

<head>

<style>

body,ul,li{margin:0; padding:0; font:12px/1.5 arial;}

ul,li{list-style:none;}

.wrap{width:500px; margin:20px auto;}

.hide{display:none;}

#tab_t{height:25px;border-bottom:1px solid #ccc;}

#tab_t li{float:left; width:80px; height:24px;

line-height:24px; margin:0 4px; text-align:center;

border:1px solid #ccc; border-bottom:none;

background:#f5f5f5; cursor:pointer}

#tab_t .act{ position:relative; height:25px;

margin-bottom:-1px; background:#fff;}

#tab_c{border:1px solid #ccc;

border-top:none; padding:20px;}

</style>

</head>

<body>

</ul>

</div>

</body>

</html>

第二步，實(shí)現(xiàn)簡(jiǎn)單的切換效果

要點(diǎn)1：

abc.document.getElementsByTagName("li")

取得abc下面的所有標(biāo)簽為li的元素，返回的是一個(gè)元素集合，有數(shù)組的一些屬性。

要點(diǎn)2：循環(huán)，先循環(huán)給li加上onclick事件，再onlink事件點(diǎn)擊的時(shí)候，再循環(huán)讓所有選項(xiàng)卡的act樣式去掉，所有的內(nèi)容隱藏。然后讓所點(diǎn)擊的選項(xiàng)及對(duì)應(yīng)內(nèi)容顯示。

要點(diǎn)3：

tab_t_li[i].index = i;

在循環(huán)時(shí)，給選項(xiàng)卡加一個(gè)額外的屬性并賦值，以做選項(xiàng)卡和內(nèi)容的對(duì)應(yīng)。

<!DOCTYPE html>

<html>

<head>

<style>

body,ul,li{margin:0; padding:0; font:12px/1.5 arial;}

ul,li{list-style:none;}

.wrap{width:500px; margin:20px auto;}

.hide{display:none;}

#tab_t{

height:25px;

border-bottom:1px solid #ccc;

}

#tab_t li{

float:left;

width:80px;

height:24px;

line-height:24px;

margin:0 4px;

text-align:center;

border:1px solid #ccc;

border-bottom:none;

background:#f5f5f5;

cursor:pointer

}

#tab_t .act{

position:relative;

height:25px;

margin-bottom:-1px;

background:#fff;

}

#tab_c{

border:1px solid #ccc;

border-top:none;

padding:20px;

}

</style>

window.onload = function(){

var tab_t = document.getElementById("tab_t");

var tab_t_li = tab_t.getElementsByTagName("li");

var tab_c = document.getElementById("tab_c");

var tab_c_li = tab_c.getElementsByTagName("div");

var len = tab_t_li.length;

var i=0;

for(i=0; i<len; i++){

tab_t_li[i].index = i;

tab_t_li[i].onclick = function(){

for(i=0; i<len; i++){

tab_t_li[i].className = '';

tab_c_li[i].className = 'hide';

}

tab_t_li[this.index].className = 'act';

tab_c_li[this.index].className = '';

}

</script>

</head>

<body>

</ul>

</div>

</body>

</html>

第三步，寫成函數(shù)。上面的寫法只能一個(gè)頁(yè)面用一個(gè)選項(xiàng)卡，如果再加一個(gè)的話，就需要復(fù)制一份，再改很多變量名。

要點(diǎn)：tab_t_li[i][evt] 因?yàn)閭髦档臅r(shí)候是字符串，如果直接寫的話就是tab_t_li[i]."onclick"這樣話是執(zhí)行不了的，tab_t_li["onclick"]這樣執(zhí)行沒問題。

好了，現(xiàn)在一個(gè)頁(yè)面上就可以有多個(gè)切換了，只需要調(diào)用函數(shù)的時(shí)候，寫上相應(yīng)的id名和標(biāo)簽名，事件名稱就可以了

<!DOCTYPE html>

<html>

<head>

<style>

body,ul,li{margin:0; padding:0; font:12px/1.5 arial;}

ul,li{list-style:none;}

.wrap{width:500px; margin:20px auto;}

.hide{display:none;}

#tab_t{

height:25px;

border-bottom:1px solid #ccc;

}

#tab_t li{

float:left;

width:80px;

height:24px;

line-height:24px;

margin:0 4px;

text-align:center;

border:1px solid #ccc;

border-bottom:none;

background:#f5f5f5;

cursor:pointer

}

#tab_t .act{

position:relative;

height:25px;

margin-bottom:-1px;

background:#fff;

}

#tab_c{

border:1px solid #ccc;

border-top:none;

padding:20px;

}

</style>

window.onload = function(){

tab("tab_t","li","tab_c","div","onmouseover")

function tab(tab_t,tab_t_tag,tab_c,tag_c_tag,evt){

var tab_t = document.getElementById(tab_t);

var tab_t_li = tab_t.getElementsByTagName(tab_t_tag);

var tab_c = document.getElementById(tab_c);

var tab_c_li = tab_c.getElementsByTagName(tag_c_tag);

var len = tab_t_li.length;

var i=0;

for(i=0; i<len; i++){

tab_t_li[i].index = i;

tab_t_li[i][evt] = function(){

for(i=0; i<len; i++){

tab_t_li[i].className = '';

tab_c_li[i].className = 'hide';

}

tab_t_li[this.index].className = 'act';

tab_c_li[this.index].className = '';

}

</script>

</head>

<body>

</ul>

</div>

</body>

</html>

更多信息請(qǐng)查看IT技術(shù)專欄

更多信息請(qǐng)查看腳本欄目

上一篇：js使用DOM操作實(shí)現(xiàn)簡(jiǎn)單留言板的方法

下一篇：js實(shí)現(xiàn)星星打分效果的方法

易賢網(wǎng)手機(jī)網(wǎng)站地址：js實(shí)現(xiàn)簡(jiǎn)單的可切換選項(xiàng)卡效果

由于各方面情況的不斷調(diào)整與變化，易賢網(wǎng)提供的所有考試信息和咨詢回復(fù)僅供參考，敬請(qǐng)考生以權(quán)威部門公布的正式信息和咨詢?yōu)闇?zhǔn)！

相關(guān)閱讀腳本欄目

Bottle框架中的裝飾器類和描述符應(yīng)用詳解10月30日

Python探索之SocketServer詳解10月30日

Python探索之實(shí)現(xiàn)一個(gè)簡(jiǎn)單的HTTP服務(wù)器10月30日

python探索之BaseHTTPServer-實(shí)現(xiàn)Web服務(wù)器介紹10月30日

13個(gè)最常用的Python深度學(xué)習(xí)庫(kù)介紹10月30日

深入理解Python中的*重復(fù)運(yùn)算符10月30日

python logging日志模塊詳解10月30日

System表空間不足的報(bào)警問題淺析10月22日

Android開發(fā)自定義TextView省略號(hào)樣式的方法10月22日

MySQL 清除表空間碎片的實(shí)例詳解10月22日

Ubuntu下MySQL安裝及配置遠(yuǎn)程登錄教程10月22日

Python 2.x如何設(shè)置命令執(zhí)行的超時(shí)時(shí)間實(shí)例10月22日

windows 64位下redis安裝教程10月22日

Android 自定義 HorizontalScrollView 打造多圖片OOM 的橫向滑動(dòng)效果10月22日

淺談Node Inspector 代理實(shí)現(xiàn)10月22日

java web開發(fā)之購(gòu)物車功能實(shí)現(xiàn)示例代碼10月22日

Android開發(fā)中GridView用法示例10月22日

Django ORM框架的定時(shí)任務(wù)如何使用詳解10月22日

SpringMail使用過程中的報(bào)錯(cuò)解決辦法10月22日

Android 使用自定義RecyclerView控件實(shí)現(xiàn)Gallery效果10月22日

易賢網(wǎng)移動(dòng)網(wǎng)站

2026國(guó)考·省考課程試聽報(bào)名

報(bào)班類型
姓名
手機(jī)號(hào)
驗(yàn)證碼

茄子在线看片免费人成视频,午夜福利精品a在线观看,国产高清自产拍在线观看,久久综合久久狠狠综合