<!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> <mce:style type="text/css"><!-- *{ border:0; padding:0; margin:0; } ul{ width:400px; height:30px; background-color:#CCCCCC; margin:0; } ul li{ display:block; list-style:none; float:left; height:30px; line-height:30px; width:80px; } ul li.liItem{ background-color:#996666; color:#FFFFFF; } ul li.liItem_{ background-color:#CCCCCC; color:#000000; } .tabItem{ width:400px; height:200px; background-color:#996666; } .tabItem_{ width:400px; height:200px; background-color:#996666; display:none; } --></mce:style><style type="text/css" mce_bogus="1"> *{ border:0; padding:0; margin:0; } ul{ width:400px; height:30px; background-color:#CCCCCC; margin:0; } ul li{ display:block; list-style:none; float:left; height:30px; line-height:30px; width:80px; } ul li.liItem{ background-color:#996666; color:#FFFFFF; } ul li.liItem_{ background-color:#CCCCCC; color:#000000; } .tabItem{ width:400px; height:200px; background-color:#996666; } .tabItem_{ width:400px; height:200px; background-color:#996666; display:none; }</style> </head> <body> <div id="tabsControl"> <ul> <li class="liItem" οnmοuseοver="over(event);">aaa</li> <li οnmοuseοver="over(event);">bbb</li> <li οnmοuseοver="over(event);">ccc</li> </ul> <div class="tabItem">aaaa</div> <div class="tabItem_">bbbb</div> <div class="tabItem_">cccc</div> </div> </body> </html> <mce:script type="text/javascript"><!-- function over(event){ var tag = event.srcElement || event.target;//IE有srcElement属性,而在Firefox中为target属性。 var tagParentNode = tag.parentNode;//事件源的父节点 for(var i = 0; i < tagParentNode.getElementsByTagName("li").length; i++){ tagParentNode.getElementsByTagName("li")[i].className = "liItem_";//去掉所有选项卡的单项的样式 } tag.className = "liItem";//为触发onmouseover事件的事件选项卡添加样式 var tabIndex = 0;//获取选择的菜单项的索引 for(var i = 0; i < tagParentNode.getElementsByTagName("li").length; i++){//遍历ul下的li标签 if(tagParentNode.getElementsByTagName("li")[i].className == "liItem"){//如果标签样式为liItem,则为菜单所以赋值。 tabIndex = i; } } var conIndex = 0; var childCon = new Object(); for(var i = 0;i < document.getElementById("tabsControl").childNodes.length;i++){ if((document.getElementById("tabsControl").childNodes[i]).nodeName.toLowerCase() == "div"){ document.getElementById("tabsControl").childNodes[i].className = "tabItem_"; childCon[conIndex] = document.getElementById("tabsControl").childNodes[i]; conIndex++; } } childCon[tabIndex].className = "tabItem"; } // --></mce:script>