一段仿属性页的例子

最新推荐文章于 2021-06-03 10:09:39 发布

overmind

最新推荐文章于 2021-06-03 10:09:39 发布

阅读量2.3k

点赞数

分类专栏： html+javascript 文章标签： input class javascript border button bt

本文链接：https://blog.csdn.net/overmind/article/details/533937

版权

html+javascript 专栏收录该内容

61 篇文章 0 订阅

订阅专栏

这是一个仿属性页的例子，上面有个图片，然后控制几个div,这些div同时只有一个可见，从而模仿了属性页的形式。

</head>
<body>
<table border="0" width="100%" height="100%" cellspacing="0" cellpadding="0"><tr><td width="255" valign="top">

<table border="0" width="100%" height="100%" cellspacing="1" cellpadding="1">
<tr><td valign="top">
<table border="0" width="100%" height="100%" cellspacing="0" cellpadding="2" >
<tr><td height="5" ></td></tr>
<tr><td height="25" >

<map name="FPMap0">

</map>
<div align=center><table border="0" width="240" style="border-collapse: collapse" cellpadding="0">
<tr><td colspan="3">
<img border="0" src="/netdrive/style/img5/z_ml_1.gif" width="240" height="25" usemap="#FPMap0" name='zmltp' style="cursor:hand;"></td></tr>
<tr><td width="1" height="120" class="ta_zt_t"></td>
<td width="238" class="tczq" height="120" valign="top">

<div id='ml_1' align =center style="display:block">
<table border="0" cellspacing="1" cellpadding="0"><tr><td height=2>
</td></tr><tr><td>
  姓名:<input type="text" id="xm" size="8" class="TX3" οnkeypress="if (window.event.keyCode==13){nr.focus();return false;}">
  公开:<input type="checkbox" id="bdgkpdlyb" checked >
  <img border="0" src="/images/sty/00zxz1.gif" width="15" height="15" οnclick="changetp('z');" style="cursor:hand;">
  <img border="0" name="t_bq" src="/images/face2/f1.gif" width="15" height="15">
  <img border="0" src="/images/sty/00zxy1.gif" width="15" height="15" οnclick="changetp('y');" style="cursor:hand;">
  <input type=hidden id="bdbq" value=1 >
</td></tr><tr><td>
  <textarea rows="2" id="nr" cols="65" class="testarea1" style="width: 210; height:63"></textarea>
</td></tr><tr><td>
  <span id=qly1 style="display:block">
   <p align =center><input type=button value=" 提交留言 " οnclick="checkly(1);" class='BT2' id=sutjly></p>
  </span>
  <span id=qly2 style="display:none">
   <p align =center>
   <input type=button value=" 修改 " οnclick="checkly(0);" class='BT2' id=sutjly>
   <input type=button value=" 删除 " οnclick="lybj_sc();" class='BT2' id=sutjly>
   <input type=button value=" 取消 " οnclick="lybj_qx();" class='BT2' id=sutjly>
   <input type=hidden id="bdlyjl">
   </p>
  </span>
</td></tr></table>
</div>

<div id='ml_2' align =center style="display:none">
<table border="0" cellspacing="1" cellpadding="0"><tr><td height=10>
</td></tr><tr><td>
  目录标题:<input type="text" id="bdbt" class="tx3" style="width:148;" οnkeypress="if (window.event.keyCode==13){bdsm.focus();return false;}">
</td></tr><tr><td>
  签写署名:<input type="text" id="bdsm" class="tx3" style="width:148;" οnkeypress="if (window.event.keyCode==13){sutjbt.focus();return false;}">
</td></tr><tr><td>
  开启密码:<input type="password" id="bdmlmm" class="tx3" style="width:148;" οnkeypress="if (window.event.keyCode==13){sutjbt.focus();return false;}">
</td></tr><tr><td height=30>
  <p align=center><input type=button id=sutjbt value=" 添加目录 " οnclick="checkbt();" class='BT2'>
</td></tr></table>
</div>

<div id='ml_5' align =center style="display:none">
<table border="0" cellspacing="1" cellpadding="0"><tr><td height=20>
</td></tr><tr><td>
目录标题:<input type="text" id="bdbt_bj" class="tx3" style="width:148;" οnkeypress="if (window.event.keyCode==13){bdsm_bj.focus();return false;}">
</td></tr><tr><td>
  签写署名:<input type="text" id="bdsm_bj" class="tx3" style="width:148;" οnkeypress="if (window.event.keyCode==13){sutjbt_xg.focus();return false;}">
</td></tr><tr><td>
  开启密码:<input type="password" id="bdmlmm_bj" class="tx3" style="width:148;" οnkeypress="if (window.event.keyCode==13){sutjbt_xg.focus();return false;}">
</td></tr><tr><td height=30>
  <p align =center>
  <input type=button value=" 修改 " οnclick="checkbt_bj();" class='BT2' id="sutjbt_xg">
  <input type=button value=" 删除 " οnclick="checkbt_sc();" class='BT2' id="sutjbt_sc">
  <input type=button value=" 取消 " οnclick="qhzml('ml_1');" class='BT2'>
  <input type=hidden id="mlbj_sxjl">
  <input type=hidden id="mlbj_mmjl">
  </p>
</td></tr></table>
</div>

<div id='ml_3' align=center style="display:none" >
<table border="0" cellspacing="0" cellpadding="0" width="100%"><tr><td width=13></td><td>
<table border="0" cellspacing="0" cellpadding="0" height=40><tr><td>
  类型:<input type="radio" id="wjlx1" name=r1 checked onClick="changelx(1);" style="cursor:hand;"><label for="wjlx1" style="cursor:hand;">上传文件</label>
  <input type="radio" id="wjlx2" name=r1 onClick="changelx(2)" style="cursor:hand;"><label for="wjlx2" style="cursor:hand;">链接网址</label>
  </td></tr><tr><td>
  分类:<input type=text id="telb" class=tx3 size=15 readonly style="color:#666666" >
  [<a href="javascript:changelx(3);" class="jaml">新增分类</a>]
</td></tr></table>
<table border="0" cellspacing="0" cellpadding="0" id="idwj1" style="display:block;" height =80><tr><td height=20 id="rqfile" valign="top">
  <Iframe style="display:block" id="frafileup_1" src="netdrive/upfile.aspx?user=720445" width="100%" height=20 scrolling=auto frameborder="0"></iframe>
  </td></tr><tr><td height=20>
  备注:<input type=text id="scbt" class="tx3" size=26 οnkeypress="if (window.event.keyCode==13){filesc2.focus();return false;}">

</td></tr><tr><td height=30>
  <div id="filesczt1" style="display:block;">
    
   <input type="checkbox" id="scmore" value="ON" οnclick="filescmore();"><label for="scmore" style="cursor:hand;">同时上传多个</label>
   <input type=button value="开始上传" class="bt2" id="filesc2" οnclick="wjscjs=1;filescks(1);">
  </div>
  <div id="filesczt2" style="display:none;">正在上传文件</div>
  </td></tr><tr><td>
</td></tr></table>
<table border="0" cellspacing="0" cellpadding="0" id="idwj2" style="display:none;" height=80><tr><td>
  </td></tr><tr><td height=15>
  标题:<input type=text id="scbt2" class="tx3" size=26 οnkeypress="if (window.event.keyCode==13){teljdz.focus();return false;}">
  </td></tr><tr><td height=15>
  网址:<input type=text id="teljdz" class=tx3 size=26 οnkeypress="if (window.event.keyCode==13){idxzlj.click();}">
  </td></tr><tr><td height=30>
  <p align=center><input type=button value="增加链接" οnclick="checkfu();" class='BT2' id=idxzlj></p>
</td></tr></table>
<table border="0" cellspacing="0" cellpadding="0" id="idwj3" style="display:none;" height=80><tr><td>
  <hr style="COLOR: #808080; BORDER-TOP-STYLE: dotted; BORDER-RIGHT-STYLE: dotted; BORDER-LEFT-STYLE: dotted; BORDER-BOTTOM-STYLE: dotted" width="95%" SIZE="1">
  </td></tr><tr><td height=15>
  分类名称:<input type=text id="tezml" class=tx3 size=20 οnkeypress="if (window.event.keyCode==13){idzml.click();}">
  </td></tr><tr><td height=40>
  <p align =center>
  <input type=button value="增加分类" οnclick="checkzml();" class='BT2' id=idzml>
  <input type=button value="返回" οnclick="if (wjlx1.checked==true){changelx(1)}else{changelx(2)}" class='BT2'>
  </p>
</td></tr></table>
</td></tr></table>
</div>

<div id='ml_6' align=center style="display:none">
<table border="0" cellspacing="1" cellpadding="0"><tr><td height=10></td></tr><tr><td>
  <span style="display:block" id="wjbjlsj1">
   <label id="bjts1">文件名称:</label><input type=text οnclick="if(this.readOnly==true)alert('此数据为改版前的数据，不支持文件名修改！');" id="bjte1" class="tx3" size=25 οnkeypress="if (window.event.keyCode==13){semlxz.focus();return false;}">
  </span>
</td></tr><tr><td>
   <label id="bjts2">文件备注:</label></font><input type=text id="bjte2" class="tx3" size=25>
</td></tr><tr><td>
  改变目录:<select size="1" name="semlxz" class="mlxz" style="width:162;height:18"></select>
　 </td></tr><tr><td height=30>
  <p align =center>
  <input type=button value=" 修改 " οnclick="fwjbj_xg();" class='BT2' id="idfileup_xg">
  <input type=button value=" 删除 " οnclick="fwjbj_sc();" class='BT2' id="idfileup_sc">
  <input type=button value=" 取消 " οnclick="qhzml('ml_1');" class="BT2">
  <input type=hidden id="wjbj_jl">
  <input type=hidden id="wjbj_jl1">
  <input type=hidden id="wjbj_jl2">
  <input type=hidden id="wjbj_jl3">
  </p>
</td></tr></table>
</div>

<div id='ml_4' style="display:none">
<table width="100%" height="100%" cellpadding="0" border="0" cellspacing="3">
<tr><td>
<div id='glyq1' style="display:block">
<p align=center>管理密码:<input type="password" id="bdglymm" οnkeypress="if (window.event.keyCode==13){sutjgl.click();}" class="tx3" style="height:18; width:60">
<input type=button value=" 登陆 " οnclick="checkgl();" class='BT2' id="sutjgl">
<br>
<img src="images/ys168_hand.gif" width="16" height="16"><a href="http://ys168.com/netdrive/sjzx/khqhmm.aspx" target="_blank" class="jaml">找回密码</a>        <br>
<img src="images/ys168_hand.gif" width="16" height="16"><a href="http://ys168.com/note_sm.htm" target="_blank" class="jaml">如何编辑删除数据</a><br>
<img src="images/ys168_hand.gif" width="16" height="16"><a href="http://ys168.com/systemset/login.aspx?username=tomcat5" class="jaml" target="_blank">进入空间后台</a>    <br>
<img src="images/ys168_hand.gif" width="16" height="16"><a href="http://ys168.com/lt/zl/notify.htm" class="jaml" target="_blank">永硕E盘必读</a>     
</p>
</div>
<div id='glyq2' style="display:none;">
<table height="100%" cellPadding="0" width="100%" border="0">
<tr><td height="10"></td></tr><tr><td>
  <p> 空间级别:免费型空间(20M)<br> 到期日期:未定
</td></tr><tr><td height=30>
<p align="center">
<input type=button value="如何维护数据？" id='glytc' class='bt2' οnclick="ggwh();">
<input type=button value="退出管理" id='glytc' class='bt2' οnclick="fglytc();">
</td></tr><tr><td height=20>
<p align =center>
[<a href="http://ys168.com/systemset/login.aspx?username=tomcat5" class="jaml" target="_blank">进入空间后台</a>]
</p>
</td></tr></table>