热门软件
地铁跑酷 冒险迷岛 全民迷宫 连连消大作战 小河狸创客 阿里健康医鹿 支付宝app 番薯小说 MOMO陌陌 虾米音乐app

位置导航：A5下载 > 源码技巧 > 父类数据

js实现仿Windows风格选项卡和按钮效果实例

时间：2015-05-13 11:17来源：a5源码作者：zhao浏览：177

这篇文章主要介绍了js实现仿Windows风格选项卡和按钮效果的方法,可实现类似windows选项卡风格的tab标签效果,需要的朋友可以参考下……

本文实例讲述了js实现仿Windows风格选项卡和按钮效果的方法。分享给大家供大家参考。具体实现方法如下：

<html>

<head>

<!--

body{

font-family: 'MS Shell Dlg', 宋体, Tahoma;

font-size: 12px;

background-color: #336699;

color:#000000;

}

td, div, input, textarea{

font-family: 'MS Shell Dlg', 宋体, Tahoma;

font-size: 12px;

cursor: default;

}

.title{

background-color: #000080;

color:#fdf7d3;

padding: 1;

font-family:宋体;

font-size:12px;

}

.up{

background-color: #cccccc;

color:#000000;

border: 2px outset #ffffff

}

.down{

background-color: #cccccc;

border:2px inset #ffffff

}

.up1{

background-color: #cccccc;

color: #000000;

border: 1px outset #ffffff

}

.down1{

background-color:#cccccc;

border:1px inset #ffffff

}

.l {

background-color: #cccccc;

height: 18px;

border-left: 2px outset #ffffff;

border-right: 2px outset #ffffff;

color:#000000;

border-top: 2px outset #ffffff;

padding-top: 2;

height:18

}

.lc {

background-color: #cccccc;

height: 18px;

border-left: 2px outset #ffffff;

border-right: 2px outset #ffffff;

color:#000000;

border-top: 2px outset #ffffff;

padding-top: 2;

height:20

}

.l-h{

background-color: #cccccc;

border-left: 2px outset #ffffff ;

border-top: 2px outset #ffffff;

color:#000000;

}

.l-c{

background-color: #cccccc;

border-top: 2px outset #ffffff

}

.l-r {

background-color: #cccccc;

border-right: 2px outset #ffffff;

border-top: 2px outset #ffffff;

color:#000000;

}

.l-hc{

background-color: #cccccc;

border-left: 2px outset #ffffff;

color:#000000;

}

.l-cc{

background-color: #cccccc;

color:#000000;

}

.l-rc {

background-color: #cccccc;

border-right: 2px outset #ffffff;

color:#000000;

}

td{

color:#000000;

}

-->

</style>

<!--

function restore()

{

td1.className="l";

td2.className="l";

td3.className="l";

td4.className="l";

td5.className="l";

td6.className="l";

td_1.className="l-h";

td_2.className="l-c";

td_3.className="l-c";

td_4.className="l-c";

td_5.className="l-c";

td_6.className="l-c";

w1.style.display="none";

w2.style.display="none";

w3.style.display="none";

w4.style.display="none";

w5.style.display="none";

w6.style.display="none";

}

function c1()

{

td1.className="lc";

td_1.className="l-hc";

w1.style.display="block";

}

function c2()

{

td2.className="lc";

td_2.className="l-cc";

w2.style.display="block";

}

function c3()

{

td3.className="lc";

td_3.className="l-cc";

w3.style.display="block";

}

function c4()

{

td4.className="lc";

td_4.className="l-cc";

w4.style.display="block";

}

function c5()

{

td5.className="lc";

td_5.className="l-cc";

w5.style.display="block";

}

function c6()

{

td6.className="lc";

td_6.className="l-cc";

w6.style.display="block";

}

//-->

</SCRIPT>

<tr>