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

前端技术 2023/09/09 JavaScript

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

<html>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />
<head>
<style type=\"text/css\">
<!--
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>
<title>显示属性</title>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\"></head>
<body style=\"border:outset 1 #ffffff;margin: 0;background-color: #cccccc;padding:3px\" scroll=no>
<SCRIPT LANGUAGE=\"JavaScript\">
<!--
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>
<form name=\"free\" method=\"post\" target=\"_target\">
<div align=\"center\">
<center>
<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"400\" height=\"61\">
<tr>
<td width=\"50\" height=\"20\" align=\"center\" 
valign=\"bottom\" onclick=restore();c1();>
<div id=\"td1\" class=\"lc\">背景</div></td>
<td width=\"50\" height=\"20\" align=\"center\" 
valign=\"bottom\" onclick=restore();c2();>
<div id=\"td2\" class=\"l\">屏保</div></td>
<td width=\"50\" height=\"20\" align=\"center\" 
valign=\"bottom\" onclick=restore();c3();>
<div id=\"td3\" class=\"l\">外观</div></td>
<td width=\"50\" height=\"20\" align=\"center\" 
valign=\"bottom\" onclick=restore();c4();>
<div id=\"td4\" class=\"l\">Web</div></td>
<td width=\"50\" height=\"20\" align=\"center\" 
valign=\"bottom\" onclick=restore();c5();>
<div id=\"td5\" class=\"l\">效果</div></td> 
<td width=\"50\" height=\"20\" align=\"center\" 
valign=\"bottom\" onclick=restore();c6();>
<div id=\"td6\" class=\"l\">设置</div></td>
<td width=\"50\" height=\"20\" align=\"center\" valign=\"bottom\" ></td>
<td width=\"50\" height=\"20\" align=\"center\" valign=\"bottom\"></td>
</tr>
<tr style=\"\">
<td width=\"50\" height=\"1\" align=\"center\" class=\"l-hc\" id=\"td_1\" > </td>
<td width=\"50\" height=\"1\" align=\"center\" class=\"l-c\" id=\"td_2\"> </td>
<td width=\"50\" height=\"1\" align=\"center\" class=\"l-c\" id=\"td_3\"> </td>
<td width=\"50\" height=\"1\" align=\"center\" class=\"l-c\" id=\"td_4\"> </td>
<td width=\"50\" height=\"1\" align=\"center\" class=\"l-c\" id=\"td_5\"> </td> 
<td width=\"50\" height=\"1\" align=\"center\" class=\"l-c\" id=\"td_6\"> </td>
<td width=\"50\" height=\"1\" align=\"center\" class=\"l-c\" id=\"td_\"> </td>
<td width=\"50\" height=\"1\" align=\"center\" class=\"l-r\" id=\"td_\"> </td>
</tr>
<tr>
<td width=\"398\" height=\"360\" class=\"up\" colspan=\"8\"
style=\"border-top-style: solid; border-top-width: 0; padding: 5\">
<p align=\"center\"> 
<div align=\"center\">
<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" 
width=\"100%\" height=\"325\">
<tr>
<td width=\"100%\" height=\"280\">
<div align=\"center\">
<center>
<div style=\"display:\" id=w1><h1>1</h1></div>
<div style=\"display:none\" id=w2><h1>2</h1></div>
<div style=\"display:none\" id=w3><h1>3</h1></div>
<div style=\"display:none\" id=w4><h1>4</h1></div>
<div style=\"display:none\" id=w5><h1>5</h1></div>
<div style=\"display:none\" id=w6><h1>6</h1></div>
</center>
</div>
</td>
</tr>
</table>
</div>
</td>
</tr>
</center>
<tr>
<td width=\"398\" height=\"37\" colspan=\"8\" 
style=\"border-top-style: solid; border-top-width: 0; padding: 5\">
<p align=\"right\"><input type=\"button\" value=\"确定\" name=\"_ok\" 
style=\"width: 60;height:22\" class=\"up\"> 
<input type=\"button\" value=\"取消\" name=\"_cancel\"
style=\"width: 60;height:22\" class=\"up\" onclick=\"window.close();\"> 
<input type=\"button\" value=\"应用(A)\" name=\"_apply\" 
style=\"width: 60;height:22\" disabled class=\"up\">
</td>
</tr>
</table>
</div>
</form>
</body>
</html>

运行效果如下：

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

本文地址：https://www.stayed.cn/item/25466

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案