js實(shí)現(xiàn)簡單的可切換選項(xiàng)卡效果
來源：易賢網(wǎng) 閱讀：2357 次 日期：2015-04-13 13:46:35
溫馨提示：易賢網(wǎng)小編為您整理了“js實(shí)現(xiàn)簡單的可切換選項(xiàng)卡效果”,方便廣大網(wǎng)友查閱！

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

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

名單

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

<!DOCTYPE html>

<html>

<head>

<meta charset="gb2312" />

<title>無標(biāo)題文檔</title>

<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>

<div class="wrap">

<ul id="tab_t">

<li class="act">選擇1</li>

<li>選擇2</li>

<li>選擇3</li>

<li>選擇4</li>

</ul>

<div id="tab_c">

<div>內(nèi)容1</div>

<div class="hide">內(nèi)容2</div>

<div class="hide">內(nèi)容3</div>

<div class="hide">內(nèi)容4</div>

</div>

</div>

</body>

</html>

第二步，實(shí)現(xià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)及對應(yīng)內(nèi)容顯示。

要點(diǎn)3：

1

tab_t_li[i].index = i;

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

<!DOCTYPE html>

<html>

<head>

<meta charset="gb2312" />

<title>無標(biāo)題文檔</title>

<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>

<script>

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>

<div class="wrap">

<ul id="tab_t">

<li class="act">選擇1</li>

<li>選擇2</li>

<li>選擇3</li>

<li>選擇4</li>

</ul>

<div id="tab_c">

<div>內(nèi)容1</div>

<div class="hide">內(nèi)容2</div>

<div class="hide">內(nèi)容3</div>

<div class="hide">內(nèi)容4</div>

</div>

</div>

</body>

</html>

第三步，寫成函數(shù)。上面的寫法只能一個(gè)頁面用一個(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è)頁面上就可以有多個(gè)切換了，只需要調(diào)用函數(shù)的時(shí)候，寫上相應(yīng)的id名和標(biāo)簽名，事件名稱就可以了

<!DOCTYPE html>

<html>

<head>

<meta charset="gb2312" />

<title>無標(biāo)題文檔</title>

<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>

<script>

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>

<div class="wrap">

<ul id="tab_t">

<li class="act">選擇1</li>

<li>選擇2</li>

<li>選擇3</li>

<li>選擇4</li>

</ul>

<div id="tab_c">

<div>內(nèi)容1</div>

<div class="hide">內(nèi)容2</div>

<div class="hide">內(nèi)容3</div>

<div class="hide">內(nèi)容4</div>

</div>

</div>

</body>

</html>

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

更多信息請查看腳本欄目
易賢網(wǎng)手機(jī)網(wǎng)站地址：js實(shí)現(xiàn)簡單的可切換選項(xiàng)卡效果
由于各方面情況的不斷調(diào)整與變化，易賢網(wǎng)提供的所有考試信息和咨詢回復(fù)僅供參考，敬請考生以權(quán)威部門公布的正式信息和咨詢?yōu)闇?zhǔn)！

2025國考·省考課程試聽報(bào)名

  • 報(bào)班類型
  • 姓名
  • 手機(jī)號
  • 驗(yàn)證碼
關(guān)于我們 | 聯(lián)系我們 | 人才招聘 | 網(wǎng)站聲明 | 網(wǎng)站幫助 | 非正式的簡要咨詢 | 簡要咨詢須知 | 加入群交流 | 手機(jī)站點(diǎn) | 投訴建議
工業(yè)和信息化部備案號：滇ICP備2023014141號-1 云南省教育廳備案號：云教ICP備0901021 滇公網(wǎng)安備53010202001879號 人力資源服務(wù)許可證：（云）人服證字（2023）第0102001523號
云南網(wǎng)警備案專用圖標(biāo)
聯(lián)系電話：0871-65099533/13759567129 獲取招聘考試信息及咨詢關(guān)注公眾號：hfpxwx
咨詢QQ：526150442（9:00—18:00）版權(quán)所有:易賢網(wǎng)
云南網(wǎng)警報(bào)警專用圖標(biāo)