分享
 
 
 

javascript 如何实现标签式按纽

王朝html/css/js·作者佚名  2006-01-09
窄屏简体版  字體: |||超大  

截图

************************************************************************************************

<html>

<head>

<meta http-equiv="Content-Language" content="zh-cn">

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<meta name="GENERATOR" content="Microsoft FrontPage 4.0">

<meta name="ProgId" content="FrontPage.Editor.Document">

<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>

</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" >&nbsp;</td>

<td width="50" height="1" align="center" class="l-c" id="td_2">&nbsp;</td>

<td width="50" height="1" align="center" class="l-c" id="td_3">&nbsp;</td>

<td width="50" height="1" align="center" class="l-c" id="td_4">&nbsp;</td>

<td width="50" height="1" align="center" class="l-c" id="td_5">&nbsp;</td>

<td width="50" height="1" align="center" class="l-c" id="td_6">&nbsp;</td>

<td width="50" height="1" align="center" class="l-c" id="td_">&nbsp;</td>

<td width="50" height="1" align="center" class="l-r" id="td_">&nbsp;</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>

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有