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

如圖，最簡單的純粹的選項卡

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

名單

第一步，當然是先寫html代碼和css樣式

<!DOCTYPE html>

<html>

<head>

<meta charset="gb2312" />

<title>無標題文檔</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>內容1</div>

<div class="hide">內容2</div>

<div class="hide">內容3</div>

<div class="hide">內容4</div>

</div>

</div>

</body>

</html>

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

要點1：

abc.document.getElementsByTagName("li")

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

要點2：循環(huán)，先循環(huán)給li加上onclick事件，再onlink事件點擊的時候，再循環(huán)讓所有選項卡的act樣式去掉，所有的內容隱藏。然后讓所點擊的選項及對應內容顯示。

要點3：

1

tab_t_li[i].index = i;

在循環(huán)時，給選項卡加一個額外的屬性并賦值，以做選項卡和內容的對應。

<!DOCTYPE html>

<html>

<head>

<meta charset="gb2312" />

<title>無標題文檔</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>內容1</div>

<div class="hide">內容2</div>

<div class="hide">內容3</div>

<div class="hide">內容4</div>

</div>

</div>

</body>

</html>

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

要點：tab_t_li[i][evt] 因為傳值的時候是字符串，如果直接寫的話就是tab_t_li[i]."onclick"這樣話是執(zhí)行不了的，tab_t_li["onclick"]這樣執(zhí)行沒問題。

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

<!DOCTYPE html>

<html>

<head>

<meta charset="gb2312" />

<title>無標題文檔</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>內容1</div>

<div class="hide">內容2</div>

<div class="hide">內容3</div>

<div class="hide">內容4</div>

</div>

</div>

</body>

</html>

更多信息請查看IT技術專欄

更多信息請查看腳本欄目

2025國考·省考課程試聽報名

  • 報班類型
  • 姓名
  • 手機號
  • 驗證碼
關于我們 | 聯(lián)系我們 | 人才招聘 | 網站聲明 | 網站幫助 | 非正式的簡要咨詢 | 簡要咨詢須知 | 新媒體/短視頻平臺 | 手機站點 | 投訴建議
工業(yè)和信息化部備案號：滇ICP備2023014141號-1 云南省教育廳備案號：云教ICP備0901021 滇公網安備53010202001879號 人力資源服務許可證：（云）人服證字（2023）第0102001523號
聯(lián)系電話：0871-65099533/13759567129 獲取招聘考試信息及咨詢關注公眾號：hfpxwx
咨詢QQ：1093837350（9:00—18:00）版權所有:易賢網