JavaScript实现水平选项卡效果

techcharles

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

        
            Home
            IntelligenceFacts
            Research
            Perception
            Robotics
            Cognitive Science   
        

   
     
            
        
        
         
        
        
        
         
             链接1
                链接2
                链接3
                链接4
                链接5
             链接6
            
        
        
         
            
                 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.
               
            
            
        
        
         
        
        
         
        
   
我们给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

本文来自ChinaUnix博客，如果查看原文请点：http://blog.chinaunix.net/u3/111981/showart_2185141.html