HTML5 控制显示和隐藏文字的方法

通过两个单选按钮,来演示显示或隐藏div里的内容。

在 html 5 中,hidden 属性只要存在,就是隐藏的效果,显示只要删除就可以了,而不是设置false。这里是用js进行操作,我们来看看关键代码:

<script type="text/javascript" async="true">
function qq_onclick(){
var text_2=document.getElementById("text_1");
text_2.removeAttribute("hidden");
}
function qq_close(){
var text_1=document.getElementById("text_1");
text_1.setAttribute("hidden",true);
}
</script>
<div>
<input name="qq" type="radio" id="che_1" onClick="qq_onclick()" value="1" checked>
显示
<input type="radio" name="qq" value="0" id="che_0" onClick="qq_close()">
隐藏
</div>
<div id="text_1">
这是一段可以显示和隐藏的文字
</div>

运行效果如下:

显示 隐藏