概述
网站内容已成为一种有价值的商品。设计师需在满足访客需求与保持视觉吸引力、可用性之间取得平衡。内容过多会导致用户无限滚动，过少则依赖频繁点击。理想的网页布局应让用户直接获取所需信息，避免过度使用滚动条。
例如，常见的FAQ页面通常较长，许多网站会在顶部提供问题列表及跳转链接，配合“回到顶部”功能以提升体验。又如购物车结账表单，通常包含账单信息和配送信息两部分。若两者相同，仍显示配送地址部分会占用空间且显得冗余。
这些案例展示了用户对网页空间的不同需求。本教程将探讨通过“切换”内容来高效利用空间的方法：仅在客户配送地址与账单地址不同时才显示该部分。这能节省表单空间，降低结账放弃率。
我们将结合HTML、JavaScript和CSS实现隐藏表单特定部分的目标。首先创建结构化HTML表单，默认隐藏配送信息；随后编写JavaScript函数控制其CSS display属性。目标是打造紧凑、易用且可扩展的表单：需要额外信息的用户可正常输入，不需要的用户甚至不会察觉该功能的存在。
本教程旨在展示设计师如何组合工具实现功能。随着网站分析日益受重视，识别并消除转化瓶颈成为关键。通过了解访客痛点并掌握修正工具，我们可以设计更适应用户需求的解决方案，提升网站效率。
说明
第一步是创建包含表单的HTML文档，同时建立外部CSS和JavaScript文件以保持代码整洁。我将文件分别命名为index.htm、styles.css和scripts.js。
接下来构建HTML页面。为演示元素隐藏功能，先创建一个简单表单。首先在head部分链接外部文件：
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Javascript Tutorial</title> <link href="styles.css" rel="stylesheet" type="text/css" media="screen" /> <script language="JavaScript" type="text/javascript" src="scripts.js"></script> </head> <body> </body> </html>
上述代码添加了样式表链接和外部脚本引用。现在在body中添加简单表单。为聚焦JavaScript逻辑，表单已简化，您可根据需要扩展字段：
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Javascript Tutorial</title> <link href="styles.css" rel="stylesheet" type="text/css" media="screen" /> <script language="JavaScript" type="text/javascript" src="scripts.js"></script> </head> <body> <form> <p>Billing Address: <input name="bill_address" type="text" id="bill_address" /></p> <p><input name="ship_toggle" type="checkbox" id="ship_toggle" value="checkbox" /> My shipping address is different than my billing address.</p> <div> <p>Shipping Address: <input name="ship_address" type="text" id="ship_address" /></p> </div> <p><input type="submit" name="Submit" value="Submit" /></p> </form> </body> </html>
该表单包含始终可见的账单地址字段、用于切换收货地址的复选框、被div包裹的可切换收货地址区域，以及提交按钮。
目标是在用户首次访问时隐藏“收货地址”字段，仅当勾选复选框时才显示。为此，需为不可见部分分配ID。将div标签修改为：
<div id="toggle">
接着在styles.css中添加样式声明，使该部分初始不可见：
#toggle { display: none; }
预览HTML文档时，第二个输入框应不显示。若用户勾选复选框，我们希望它出现。因此需编写JavaScript函数，在复选框点击时调用。打开scripts.js并添加以下内容：
function toggle(targetId, sourceId) { target = document.getElementById(targetId); if (sourceId.checked){ target.style.display = "block"; } else { target.style.display = "none"; } }
该函数接收targetId和sourceId两个参数，便于复用。target变量获取与targetId匹配的DOM元素（即待切换的div）。if语句检查复选框状态：若选中，将target元素的display设为block以显示；否则设为none以隐藏，恢复初始状态。
最后一步是在复选框上绑定onclick事件处理程序，使其点击时触发toggle()函数。修改复选框HTML代码如下：
<input name="ship_toggle" type="checkbox" id="ship_toggle" value="checkbox" onclick="toggle('toggle', this);" />
此处传递了两个参数：'toggle'（字符串，对应div的id）和this（对象标识符，指代当前复选框本身）。上传文件并在浏览器预览，即可看到带复选框切换功能的表单。建议尝试调整元素以获得预期效果。