<div class="tab1">
<ul class="name">
<li>項(xiàng)目一</li>
<li>項(xiàng)目二</li>
<li>項(xiàng)目三</li>
</ul>
<ul class="content">
<li>類(lèi)為<em>"tab1"</em>項(xiàng)目一內(nèi)容,通過(guò)<em>"click"</em>觸發(fā)</li>
<li>類(lèi)為<em>"tab1"</em>項(xiàng)目二內(nèi)容,通過(guò)<em>"click"</em>觸發(fā)</li>
<li>類(lèi)為<em>"tab1"</em>項(xiàng)目三內(nèi)容,通過(guò)<em>"click"</em>觸發(fā)</li>
</ul>
</div>
<div class="tab1">
<ul class="name">
<li>項(xiàng)目一</li>
<li>項(xiàng)目二</li>
<li>項(xiàng)目三</li>
</ul>
<ul class="content">
<li>類(lèi)為<em>"tab1"</em>項(xiàng)目一內(nèi)容,通過(guò)<em>"click"</em>觸發(fā)</li>
<li>類(lèi)為<em>"tab1"</em>項(xiàng)目二內(nèi)容,通過(guò)<em>"click"</em>觸發(fā)</li>
<li>類(lèi)為<em>"tab1"</em>項(xiàng)目三內(nèi)容,通過(guò)<em>"click"</em>觸發(fā)</li>
</ul>
</div>
<div class="tab2">
<ul class="name">
<li>項(xiàng)目一</li>
<li>項(xiàng)目二</li>
<li>項(xiàng)目三</li>
</ul>
<ul class="content">
<li>類(lèi)為<em>"tab2"</em>項(xiàng)目一內(nèi)容,通過(guò)<em>"mouseover"</em>觸發(fā)</li>
<li>類(lèi)為<em>"tab2"</em>項(xiàng)目二內(nèi)容,通過(guò)<em>"mouseover"</em>觸發(fā)</li>
<li>類(lèi)為<em>"tab2"</em>"項(xiàng)目三內(nèi)容,通過(guò)<em>"mouseover"</em>觸發(fā)</li>
</ul>
</div>

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

/**
* 事件處理通用函數(shù)
*/
var EventUtil = {
//跨瀏覽器取事件對(duì)象event
getEvent : function(event){
return event ? event : window.event;
},
//款瀏覽器取事件對(duì)象的目標(biāo)DOM節(jié)點(diǎn)
getTarget : function(event){
return event.target||event.srcElement;
},
//跨瀏覽器對(duì)節(jié)點(diǎn)進(jìn)行事件綁定
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;
}
}
};
//設(shè)置選項(xiàng)卡切換方式
tabSwitch("tab1","click");
tabSwitch("tab2","mouseover");
/**
* 選項(xiàng)卡通用函數(shù)
*/
// 傳入?yún)?shù)inClassName設(shè)定為綁定的選項(xiàng)卡類(lèi)名，參數(shù)triggerType設(shè)定為觸發(fā)切換的類(lèi)型
function tabSwitch(inClassName,triggerType){
//取得全部選項(xiàng)卡區(qū)域
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]);
}
}
}
//為每個(gè)選項(xiàng)卡建立切換功能
for(var j=0,len=tabs.length; j<len; j++){
//獲取標(biāo)題和內(nèi)容列表
var tab = tabs[j];
//使用私有作用域?yàn)槊總€(gè)選項(xiàng)卡建立切換
(function(){
var nameUl = tab.getElementsByTagName("ul")[0];
var content = tab.getElementsByTagName("ul")[1];
//初始化選項(xiàng)卡
nameUl.getElementsByTagName("li")[0].className = "selected";
content.getElementsByTagName("li")[0].style.display = "block";
//添加事件委托
EventUtil.addHandler(nameUl,triggerType,function(event){
//獲取事件對(duì)象
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
//選項(xiàng)卡切換
if(target.nodeName.toLowerCase() == "li"){
//分別取得標(biāo)題列表項(xiàng)和內(nèi)容列表項(xiàng)
var nameList = nameUl.getElementsByTagName("li");
var contentList = content.getElementsByTagName("li");
//標(biāo)題添加selected類(lèi)，并顯示內(nèi)容
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";
}
}
}
});
})();
}
}