JS实现仿Windows经典风格的选项卡Tab切换代码

本文实例讲述了JS实现仿Windows经典风格的选项卡Tab切换代码。分享给大家供大家参考，具体如下：

这款仿Windows风格的选项卡，带有灰色的立体感，示例内容是用JS控制输出，只是为了演示功能，你在用的时候完全可以去掉的。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-f-windows-style-tab-demo/

具体代码如下：

body{
 background-color:#CCC;
}
.tab{
 margin:0;
 padding:0;
 position:absolute;
}
.tab li{
 float:left;
 list-style:none;
}
.tab li span{
 float:left;
 display:block;
 height:20px;
 line-height:20px;
 position:relative;
 border-style:solid;
 border-width:1px 1px 0 1px;
 border-color:#EEE #999 #777 #DDD;
 background-color:#CCC;
 margin:1px 2px 0 0;
 padding:0 5px 0 5px;
 font-size:12px;
 cursor:pointer;
 z-index:1;
}
.tab li div{
 display:none;
 position:absolute;
 top:22px;
 left:0px;
 background-color:#CCC;
 border:1px solid;
 border-color:#EEE #999 #777 #DDD;
 text-align:center;
 overflow:auto;
}
.tab li.selected span{
 margin-top:0;
 height:22px;
}
.tab li.selected div{
 display:block;
}

希望本文所述对大家Javascript程序设计有所帮助。