JavaScript实现水平选项卡效果

首先在body中加入以下HTML内容：

 

<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><!-- END #top -->
    <div id="main">
     <div class="show" id="div_1" style="filter:alpha(opacity=100)">
         <img src="images/intro.jpg" />  
        </div><!-- END #div_1 -->
        <div class="slide" id="div_2" style="filter:alpha(opacity=100)">
         <img src="images/package.gif" />
       
        </div><!-- END #div_2 -->
        <div class="slide" id="div_3" style="filter:alpha(opacity=100)">
         <ul class="news">
             <li><a href="">链接1</a></li>
                <li><a href="">链接2</a></li>
                <li><a href="">链接3</a></li>
                <li><a href="">链接4</a></li>
                <li><a href="">链接5</a></li>
             <li><a href="">链接6</a></li>
            </ul>
        </div><!-- END #div_3 -->
        <div class="slide" id="div_4"style="filter:alpha(opacity=100)" >
         <div id="intro">
             <p><img src="images/51NaZo0uoSL._AA75_.jpg" />
                 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio.
                </p>
           
            </div>
        </div><!-- END #div_4 -->
        <div class="slide" id="div_5" style="filter:alpha(opacity=100)" >
         <img src="images/hero_left_sales.jpg" />
        </div><!-- END #div_5 -->
        <div class="slide" id="div_6" style="filter:alpha(opacity=100)" >
         <img src="images/animal-sat-nav.jpg" />
        </div><!-- END #div_6 -->
    </div><!-- END #main -->
</div><!-- END #panel -->

 

我们给div容器的id值为div_1,div_2,...,div_6等，这样便于在JavaScript脚本中得到他们。最好在结束div后加入注释，这样当有较多div标记时便于查看。

 

---

接下来我们对上面代码添加样式：

 

#panel{
 border:1px solid #0066CC;
 height:400px;
 width:786px;
 position:relative;
}

#main{
 position:relative;
 top:32px;
 left:0;
 background:#FFFFCC;
 height:300px;
}

.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{
 background:#f8f8f8;
 color:#808080;
 text-decoration:none;
 display:block;
 width:130px;
 height:30px;

}*/

#menu li a:hover{
 color:#000;
 background:#f8f8f8;
 background-color:#CCCCCC
}

ul.news {
 list-style:none;
 margin:10px 20px;
}

.news li{
 padding:4px;
 
}

.news li a:link, .news li a:visited{
 text-decoration:none;
 color:#993333;
 display:block;
 width:220px;
 height:30px;
 background-color:#99CC99;
 text-align:center;
 line-height:30px;
}

.news li a:hover{
 background-color:#FFCC99;
 color:#FF6633;
}

div#intro{
 margin:10px;
 border:1px solid #006666;
}

div#intro img {
 float:left;
 padding:4px;
 border:1px dashed #999933;
 margin:7px;
}

div#intro p{
 font-family:"Courier New", Courier, monospace;
 font-size:14px;
}

 

上面代码中有红色字部分是为解决IE浏览器的不能正常显示的问题。

---

 

最后，我们加入JavaScript代码，当鼠标在标题上时切换下面的内容：

 

window.onload = init;

var globalLength = '';

function init(){
 
 var menu = document.getElementById("menu");
 var items = null;
 
 items = menu.childNodes;
 
 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";
   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;
 }
 
/* timer = setInterval("deOpacity()",50);*/
}

function deOpacity(){
  nOp--;
  document.writeln(nOp);
  cur2.style.filter = "alpha(opacity="+nOp+")";
  if(nOpy < 0){
   clearInterval(timer);
  }
}

 

上面代码中将红色字换为onclick可实现鼠标点击后切换显示下面的内容。

 

对代码有什么疑问，欢迎大家留言。:)