DHTML允许您在网站上创建应用程序式体验，从而降低整个页面必须完全加载。在应用程序中，当您单击某些内容时，应用web程序会立即更改以显示该特定内容或为您提供显示内容。
相反，通常必须重新加载网页，或者必须加载全新的页面。这可以使用户体验更加脱节。您的客户必须等待第一页加载，然后再等待第二页加载，依此类推。
使用<div>改善查看器体验，使用DHTML，改善这种体验的最简单方法之一是在请求时打开和关闭div元素以显示内容。一个div元素定义网页上的逻辑划分。将div视为可能包含段落，标题，链接，图像甚至其他div的框。
要创建可以打开和关闭的div，您需要以下内容：
单击时打开和关闭div来控制div的链接。显示和隐藏的div。用于设置div隐藏或可见的样式的CSS。用于执行操作的JavaScript。控制链接是最简单的部分。只需像创建另一个页面一样创建一个链接。现在，将href属性留空。
<a href="">了解HTML </a>将其放在您的网页上的任何位置。创建要显示和隐藏的div元素。确保您的div上有唯一的ID。在示例中，唯一ID是学习HTML。
<div id =“col2”>
<p>这是内容列。除了这个解释文本外，它开始是空白的。在左侧导航栏中选择您要学习的内容。文本将显示如下：</ p>
<div id =“learnHTML”>
<h3>学习HTML </ h3>
<ul>
<li> <a href =“https://www.lifewire.com/web- development-classes-3469139“>免费HTML类</a> </ li>
<li> <a href="https://www.lifewire.com/web-development-classes-3469139"> HTML Tutorial </ a > </ li>
<li> <a href="https://www.lifewire.com/web-development-classes-3469139">什么是XHTML？</a> </ li>
</ ul>
</ div>
</ div>
为CSS创建两个类：一个用于隐藏div，另一个用于显示它。您有两种选择：显示和可见性。
显示从页面流中删除div，可见性只会改变它的显示方式。有些编码员更喜欢显示，但有时候能见度也很有意义。例如：
.hidden {display：none; }
.hhidden {display：block; }
如果要使用可见性，请将这些类更改为：
.hidden {visibility：hidden; }
.hhidden {visibility：visible; }
将隐藏的类添加到div中，使其以隐藏在页面上的方式启动：
<div id =“learnHTML”class =“hidden”>
JavaScript让它工作
所有这个脚本都会查看div上的当前类集，如果它被标记为隐藏，则将其切换为unhidden，反之亦然。
这只是几行JavaScript。将以下内容放在HTML文档的头部（在<head>标记之前：
<script type =“text / javascript”>
function unhide（divID）{
var item = document.getElementById（divID）;
if（item）{
item.className =（item.className =='hidden'）？'unhidden'：'hidden';
}
}
</ SCRIPT>
调用该函数取消隐藏， divID 是您要显示或隐藏的确切唯一ID。使用div的值设置变量item。执行简单的浏览器检查; 如果浏览器不支持 getElementById，则此脚本将不起作用。
检查div上的类。如果它被隐藏，它会将其更改为未隐藏。否则，它将其更改为隐藏。要使脚本正常工作，您需要再做一件事。返回到您的链接并将javascript添加到href属性。请务必使用您在此href中命名div的确切唯一ID：
<a href="javascript:unhide('learnHTML');">学习HTML </a>
恭喜！您现在有一个div，只要您点击链接，它就会显示和隐藏。
可能需要注意的问题，这个脚本不是万无一失的。在某些情况下，它可能会给您带来问题：
JavaScript未打开。 如果您的读者没有JavaScript或已关闭，则此脚本将无效。无论读者做什么，隐藏的div都会隐藏起来。解决这个问题的一种方法是将隐藏的div放在一个noscript区域，但你必须使用它来使它们正确显示。
内容太多了。 这可以是一个很好的工具，让您的读者只能看到他们需要的内容，但如果你在隐藏的div中放置太多，它会极大地影响页面加载的方式。请记住，即使内容未显示，Web浏览器仍在下载，因此请充分了解您隐藏的内容。
最后，客户可能不习惯点击显示或隐藏内容的链接。另一个解决方案是让其中一个div打开而其他div关闭。这可以将想法传达给您的客户，这样他们就可以更快地找出如何打开剩余内容。
您应始终与客户一起测试动态HTML。一旦您确信他们能够理解并使用它，这可以是在您的网页上获取大量内容而不占用大量可见空间的好方法。