标题: 显示/隐藏"高级用户设置选项"

作者: admin

日期: 2006-08-16 02:24 PM

内容: 提供注册的地方一般都有高级用户设置选项这块，像动网论坛、discuz论坛，一般都是点击显示高级用户设置选项则出现高级选项，点击关闭高级用户设置选项则隐藏这些选项，下边我们看看它们是怎么实现的：
一、动网论坛
1.JAVASCRIPT脚本：
<script language="JavaScript" type="text/javascript">

</script>
2.供选择的复选框：
<input name="advshow" type="checkbox" id="advcheck" onclick="showadv()" value="1" /><span id="advance">显示高级用户设置选项</span>
3.高级选项：
<table cellpadding="3" cellspacing="1" align="center" class="tableborder1" id="adv"  name="adv" style="DISPLAY: none">
<tr><th colspan="2" height="24" align="left">填写详细资料</th></tr>
<tr>
<td width="40%" class="tablebody1">
<b>头像</b>：<br />选择的头像将出现在您的资料和发表的帖子中，您也可以选择下面的自定义头像</td>
...
<tr>
<td valign="top" class="tablebody1"><b>毕业院校：</b>
<input name="college" type="text" size="18" /></td>
</tr>
</table>
二、discuz论坛
1.JAVASCRIPT脚本：
<script type="text/javascript">
function showadv() {
if(document.register.advshow.checked == true) {
document.getElementById("adv").style.display = "";
} else {
document.getElementById("adv").style.display = "none";
}
}
</script>
2.供选择的复选框：
<input name="advshow" type="checkbox"  value="1" onclick="showadv()"><span id=advance>显示高级用户设置选项</span>
3.高级选项：
<tbody id=adv style="display: none">
<tr>
<td colspan="2" class="header">注册 - 选填</td>
</tr>
<tr>
<td class="altbg1">安全提问:</td>
<td class="altbg2"><select name="questionid">
<option value="0">无安全提问</option>
<option value="1">母亲的名字</option>
...
<td class="altbg1" valign="top">个人签名
:<br><br>
<span class="smalltxt"><a href="faq.php?page=misc#1" target="_blank">Discuz! 代码</a> <span class="bold">
可用
</span><br>
[img] 代码 <span class="bold">
禁用
</span>
</span></td>
<td class="altbg2"><textarea rows="4" cols="30" name="signature"></textarea></td>
</tr>
</tbody>
注意两处红色部分：display: none，也就是说，都是通过使用CSS进行控制内容的显示与否的：），顺便提一下在input中用style="display: none"和type="hidden"来的区别，前者完全将表单从页面中除去了，而后者只是看不见而已，实际还是存在的。我们经常用type="hidden"形式的表单来传递一些不希望被用户看到或知道的内容而不用style="display: none"就是一个证明。
三、实战
1.用style="display:none"实现同一区域显示不同内容
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>项目选择</title>
<script type="text/javascript">
function showt1() {
document.getElementById("t1").style.display = "";
document.getElementById("t2").style.display = "none";
document.getElementById("t3").style.display = "none";
}
function showt2() {
document.getElementById("t1").style.display = "none";
document.getElementById("t2").style.display = "";
document.getElementById("t3").style.display = "none";
}
function showt3() {
document.getElementById("t1").style.display = "none";
document.getElementById("t2").style.display = "none";
document.getElementById("t3").style.display = "";
}
</script>
</head>
<body>
<table width="240" height="20" border="0" cellpadding="0" cellspacing="1" bgcolor="#33CCFF">
  <tr>
    <td align="center" valign="middle" bgcolor="#996699"><span onclick="javascript:showt1();">项目一</span></td>
    <td align="center" valign="middle" bgcolor="#CC6600"><span onclick="javascript:showt2();">项目二</span></td>
    <td align="center" valign="middle" bgcolor="#FFCCFF"><span onclick="javascript:showt3();">项目三</span></td>
  </tr>
</table>
<table width="400" height="100" border="0" cellpadding="0" cellspacing="1" bgcolor="#00CCFF" id="t1" style="display: all">
  <tr>
    <td align="left" valign="top" bgcolor="#FFFFFF">这边是项目一的内容</td>
  </tr>
</table>
<table width="400" height="100" border="0" cellpadding="0" cellspacing="1" bgcolor="#00CCFF" id="t2" style="display: none">
  <tr>
    <td align="left" valign="top" bgcolor="#FFFFFF">这边是项目二的内容</td>
  </tr>
</table>
<table width="400" height="100" border="0" cellpadding="0" cellspacing="1" bgcolor="#00CCFF"  id="t3" style="display: none">
  <tr>
    <td align="left" valign="top" bgcolor="#FFFFFF">这边是项目三的内容</td>
  </tr>
</table>
</body>
</html>
2.style="display:none"和type="hidden"区别
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transtioinal//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript">
function showadv() {
if(document.form1.checkbox.checked == true) {
document.getElementById("adv").style.display = "";
document.getElementById("advance").innerHTML="关闭高级用户设置选项";
} else {
document.getElementById("adv").style.display = "none";
document.getElementById("advance").innerHTML="显示高级用户设置选项";
}
}
</script>
</head>
<body>
<form action="index.asp" method="post" name="form1" target="_self" id="form1">
  <p>
    文本1：
      <input name="text1" type="text" id="text1" />
    <br />
    <br />
    <input type="checkbox" name="checkbox" value="checkbox" onclick="showadv()" /><span id="advance">显示高级用户设置选项</span>
  </p>
  <table width="200" border="0" cellspacing="0" cellpadding="0" id=adv style="display: none">
    <tr>
      <td height="20">文本2：<input name="text2" type="text" id="text2" /></td>
    </tr>
  </table>
  <p>
    <input type="submit" name="Submit" value="提交" />
  </p>
</form>
</body>
</html>
<%
if request.form("text1")<>"" then
    response.write request.form("text1") & "<br>" & request.form("text2")
End if
%>

+ 查看当前日志评论 (1)

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.078 ms

标题: 显示/隐藏"高级用户设置选项"

你没有权限发表评论

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.078 ms

暂无评论

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.078 ms