水平选项卡
<div id="panel"> <div id="top"> <ul id="menu"> <li id="1">Home</li> <li id="2">IntelligenceFacts</li> <li id="3">Research</li> <li id="4">Perception</li> <li id="5">Robotics</li> <li id="6">Cognitive Science</li> </ul> </div> <div id="main"> <div id="div_1" style="filter:alpha(opacity=100)"> Home </div> <div id="div_2" style="filter:alpha(opacity=100)"> IntelligenceFacts </div> <div id="div_3" style="filter:alpha(opacity=100)"> Research </div> <div id="div_4"style="filter:alpha(opacity=100)" > Perception </div> <div id="div_5" style="filter:alpha(opacity=100)" > Robotics </div> <div id="div_6" style="filter:alpha(opacity=100)" > Cognitive Science </div> </div></div>
#panel{ border:1px solid #0066CC; height:400px; width:782px; position:relative; } #main{ position:relative; top:32px; left:0; background:#FFFFCC; height:366px; } .slide{ position:absolute; left:1px; top:1px; display:none; } .show{ position:absolute; left:1px; top:1px; display:block; } ul#menu { color:#808080; padding:0; margin:0; list-style:none; font-family:"Courier New", Courier, monospace; font-size:12px; /*-------------------- 解决 IE 不兼容问题 ---------------------*/ position:absolute; !important left:0; top:0; } #menu li{ padding:14px 18px 14px 18px; width:130px; height:30px; color:#444; float:left; border-top:1px solid #666666; border-right:1px solid #666666; border-bottom:1px solid #666666; text-align:center; line-height:30px; margin:0; padding:0; } #menu li a:hover{ color:#000; background:#f8f8f8; background-color:#CCCCCC }?
window.onload = init; var globalLength = ''; function init(){ var menu = document.getElementById("menu"); var items = null; items = menu.childNodes; document.getElementById(1).style.borderBottom = "1px solid #FFFFCC"; document.getElementById(1).style.backgroundColor = "#FFFFCC"; globalLength = items.length; for(var i = 0; i < items.length; i++){ items[i].onmouseover = change; items[i].style.filter = "alpha(opacity=50)"; } } function change(evnt){ evnt = evnt ? evnt : window.event; var currentElement = evnt.srcElement ? evnt.srcElement : evnt.target; var idValue = currentElement.getAttribute("id"); var current = document.getElementById("div_" + idValue); for(var i = 1; i <= globalLength; i++){ if(idValue == i){ document.getElementById("div_" + i).className = "show"; document.getElementById(i).style.borderBottom = "1px solid #FFFFCC"; document.getElementById(i).style.backgroundColor = "#FFFFCC"; document.getElementById(i).style.cursor = "hand"; gradiant(document.getElementById("div_" + i)); }else{ document.getElementById("div_" + i).className = "slide"; document.getElementById(i).style.borderBottom = "1px solid #666666"; document.getElementById(i).style.backgroundColor = "#FFFFFF"; } } } var timer = null; var nOp = 0; var cur2 = null; function gradiant(cur){ cur2 = cur; var sOpactiy = cur.style.filter; var op = sOpactiy.substring(sOpactiy.indexOf('=')+1,sOpactiy.length-1); nOp = parseFloat(op); while(nOp < 0){ cur.style.filter = "alpha(opacity="+nOp+")"; nOp -= 0.0001; } } function deOpacity(){ nOp--; document.writeln(nOp); cur2.style.filter = "alpha(opacity="+nOp+")"; if(nOpy < 0){ clearInterval(timer); } }?