水平选项卡

<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 class="show" id="div_1" style="filter:alpha(opacity=100)">
      Home
    </div>
    <div class="slide" id="div_2" style="filter:alpha(opacity=100)">
      IntelligenceFacts

    </div>
    <div class="slide" id="div_3" style="filter:alpha(opacity=100)">
      Research
    </div>
    <div class="slide" id="div_4"style="filter:alpha(opacity=100)" >
      Perception
    </div>
    <div class="slide" id="div_5" style="filter:alpha(opacity=100)" >
      Robotics
    </div>
    <div class="slide" 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);
    }
  }