本文实例讲述了JS实现黑色风格的网页TAB选项卡效果代码。分享给大家供大家参考。具体如下:
这是一款网页TAB选项卡JS代码,黑色超酷的风格,看了后你会喜欢的,很熟悉很经典的风格,似曾相识的感觉,希望大家喜欢。
运行效果截图如下:
在线演示地址如下:
具体代码如下:
/p>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Tab切换function setTab(name,cursel,n){
for(i=1;i<=n;i++){
var menu=document.getElementById(name+i);
var con=document.getElementById("con_"+name+"_"+i);
menu.className=i==cursel?"hover":"";
con.style.display=i==cursel?"block":"none";
}
}
*{
margin:0px;
padding:0px;
list-style:none;
}
.main{
width:306px;
height:299px;
float:left;
margin:300px;
display:inline;
background:#000;
padding:3px;
}
.main .menu{
width:306px;
height:31px;
overflow:hidden;
float:left;
}
.main .menu span{
width:60px;
height:30px;
line-height:30px;
overflow:hidden;
text-align:center;
float:left;
margin:1px 0 0 1px;
background:#333;
color:#BCBCBC;
font-weight:bold;
cursor:pointer;
font-size:12px;
}
.main .menu .hover{
background:#666;
color:#FFF;
}
.main .content{
width:304px;
height:266px;
overflow:hidden;
float:left;
margin:1px;
margin-top:0px;
display:inline;
background:#333333;
}
.main .content div{
width:304px;
height:266px;
line-height:266px;
text-align:center;
color:#FFFFFF;
font-weight:bold;
background:#666;
}
希望本文所述对大家的JavaScript程序设计有所帮助。