提示：您可以先修改部分代碼再運行
可重用的選項卡切換javascript代碼<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>選項卡</title><style type="text/css">body{text-align:center;}.tab1, .tab2 {width:350px;margin:0 5px;background:#CC9933;opacity:0.5;border-radius:5px 5px 5px 5px;box-shadow: #CCC 4px 4px 4px;text-align:left;float:left;display:inline;}.name {list-style:none;overflow:hidden;}.name li {width:90px;font:bold 16px/30px Verdana, Geneva, sans-serif;background:#669900;text-align:center;border-radius:5px 5px 5px;margin-right:5px;float:left;display:inline;cursor:pointer;}li.selected{background:#FF9900;}.content li{height:500px;display:none;}</style></head><body><div class="tab1"> <ul class="name"> <li>項目一</li> <li>項目二</li> <li>項目三</li> </ul> <ul class="content"> <li>類為<em>"tab1"</em>項目一內容,通過<em>"click"</em>觸發</li> <li>類為<em>"tab1"</em>項目二內容,通過<em>"click"</em>觸發</li> <li>類為<em>"tab1"</em>項目三內容,通過<em>"click"</em>觸發</li> </ul></div><div class="tab1"> <ul class="name"> <li>項目一</li> <li>項目二</li> <li>項目三</li> </ul> <ul class="content"> <li>類為<em>"tab1"</em>項目一內容,通過<em>"click"</em>觸發</li> <li>類為<em>"tab1"</em>項目二內容,通過<em>"click"</em>觸發</li> <li>類為<em>"tab1"</em>項目三內容,通過<em>"click"</em>觸發</li> </ul></div><div class="tab2"> <ul class="name"> <li>項目一</li> <li>項目二</li> <li>項目三</li> </ul> <ul class="content"> <li>類為<em>"tab2"</em>項目一內容,通過<em>"mouseover"</em>觸發</li> <li>類為<em>"tab2"</em>項目二內容,通過<em>"mouseover"</em>觸發</li> <li>類為<em>"tab2"</em>"項目三內容,通過<em>"mouseover"</em>觸發</li> </ul></div><script type="text/javascript">/** * 事件處理通用函數 */var EventUtil = {getEvent : function(event){return event ? event : window.event;},getTarget : function(event){return event.target||event.srcElement;},addHandler : function(element,type,handler){if(element.addEventListener){element.addEventListener(type,handler,false);}else if(element.attachEvent){element.attachEvent("on"+type,handler);}else{element["on"+type] = handler;}}};//設定選項卡切換方式tabSwitch("tab1","click");tabSwitch("tab2","mouseover");/** * 選項卡通用函數 */// 傳入參數inClassName設定為綁定的選項卡類名，參數triggerType設定為觸發切換的類型function tabSwitch(inClassName,triggerType){//取得全部選項卡地區if(document.querySelectorAll){var tabs = document.querySelectorAll("."+inClassName);}else{var divs = document.getElementsByTagName("div");var tabs = new Array();for(var k=0,lenDiv=divs.length; k<lenDiv; k++){if(divs[k].className.indexOf(inClassName) > -1){tabs.push(divs[k]);}}}//為每個選項卡建立切換功能for(var j=0,len=tabs.length; j<len; j++){//擷取標題和內容列表var tab = tabs[j];//使用私人範圍為每個選項卡建立切換(function(){var nameUl = tab.getElementsByTagName("ul")[0];var content = tab.getElementsByTagName("ul")[1];//初始化選項卡nameUl.getElementsByTagName("li")[0].className = "selected";content.getElementsByTagName("li")[0].style.display = "block";//添加事件委託EventUtil.addHandler(nameUl,triggerType,function(event){//擷取事件對象event = EventUtil.getEvent(event);var target = EventUtil.getTarget(event);//選項卡切換if(target.nodeName.toLowerCase() == "li"){//分別取得標題清單項目和內容清單項目var nameList = nameUl.getElementsByTagName("li");var contentList = content.getElementsByTagName("li");//標題添加selected類，並顯示內容for(var i=0,len=nameList.length; i<len; i++){nameList[i].className = "";contentList[i].style.display = "none";if(nameList[i] == target){nameList[i].className = "selected";contentList[i].style.display = "block";}}}});})();}}</script></body></html>
提示：您可以先修改部分代碼再運行
