本节书摘来自异步社区《HTML5 开发实例大全》一书中的第1章，第1.27节,作者： 张明星 更多章节内容可以访问云栖社区“异步社区”公众号查看。
实例说明
在HTML 5 中，绝大部分的元素都支持“hidden”属性，该属性只有如下两个取值。
true：当“hidden”的取值为“true”时，元素不在页面中显示，但还存在于页面中。false：当“hidden”的取值为“false”时，则显示于页面中。该属性的默认值为“false”，即元素创建时便显示出来。在本实例中，使用< nav >元素设置两个相互排斥的单选按钮，一个用于显示< article >元素，另一个用于隐藏< article >元素。然后编写相应的JavaScript代码实现隐藏功能。
具体实现
使用Dreamweaver创建一个名为“027.html”的文件，具体代码如下所示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>hidden属性的使用</title> <link href="css.css" rel="stylesheet" type="text/css"> <script type="text/javascript" async="true"> function Rdo_Click(v){ var blnShow=(v)?false:true; var strArt=document.getElementById("art"); strArt.setAttribute("hidden",blnShow); } </script> </head> <body> <h5>元素的隐藏属性</h5> <nav style="padding-top:5px;padding-bottom:5px"> <input type="radio" id="rdoHidden_1" onClick="Rdo_Click(1)" name="rdoHidden" value="1" checked="true"/>显示 <input type="radio" id="rdoHidden_2" onClick="Rdo_Click(0)" name="rdoHidden" value="0"/>隐藏 </nav> <article id="art" class="p3_8"> 大家好，我是雨夜，欧耶。 </article> </body> </html>在上述JavaScript代码中，自定义了一个Rdo_Click()函数，用于在单击单选按钮时调用。在该函数中，先获取单击单选按钮时传回的变量“v”值，然后将“v”值转成“hidden”属性对应的布尔值“true”或“false”；最后通过setAttribute()方法，将该值设置到< article >元素的“hidden”属性中，从而实现隐藏的效果。执行后的初始效果如图1-46所示，选择“隐藏”按钮后文字将隐藏，如图1-47所示。
https://yqfile.alicdn.com/49e517b53ed07b620a0f06ce818ed88f22006a3a.png" > 相关资源：大作业明星页面.zip