• 提升品牌形象
  • 最新HTML5+Css3网站制作技术
  • 完全区分与同行的震撼视觉体验
  • 自动适应平板、手机及电脑屏幕
  • 详细介绍
  • 企业网站入门首选
  • 强大丰富的系统功能
  • 超过1000种页面风格
  • 每年仅需¥1500元,两年仅需¥2000元
  • 详细介绍
  • 4000/4006两种开头选择
  • 智能占线、断线呼转
  • 高达300组可呼转号码
  • 智能语音导航
  • 详细介绍

If you have any question,please contact with us.

  • 昆明网站建设-在线客服

    蛋切刀 一指
    妖异眼瞳
  • 昆明网站设计-服务电话

    4000-555-94113099998627
  • 昆明网站建设-联系地址

    昆明市官渡区岔街
    鸿运都市别墅5单元1101

HTML5 实例-微设计创意工坊 为您提供 昆明网站制作 昆明网站建设 昆明网站设计 云南网站建设 昆明网络公司

  • Home
  • /
  • HTML5 实例
实例3-8 公共属性hidden的使用

实例3-8 公共属性hidden的使用

1.功能描述

在页面的<nav>元素中设置两个相互排斥的单选按钮,一个用于显示<artide>元素,另一个用于隐藏<article>元素。通过编写相应的JavaScript代码实现上述功能。

2.实现代码

在DreamweaverCS5中新建一个HTML页面3-8.html,加入代码如代码清单3-8所示。

代码清单3-8 hidden属性的使用

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8"/>
	<title>hidden属性的使用</title>
	<link href="Css/css3.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=11rdoHidden_l"
	             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>

3.页面效果

该页面在Chrome 10浏览器下执行的页面效果如图3-9所示。

图3-9 使用hidden属性的页面效果

4.源码分析

上述的JavaScript代码中,自定义了一个函数Rdo_Click(),用于单击单选按钮时调用。在该函数中,先获取单击单选按钮时传回的变量“v”值,然后将“v”值转成“hidden”属性对应的布尔值“true”或“false”;最后,通过setAttribute()方法,将该值设置到<article>元素的“hidden”属性中,从而实现隐藏的效果,实现过程如代码中加粗部分所示。

本文由昆明网站建设,昆明微设计整理发布,转载请保留链接


  • If you have any question,please contact with us.

  • QQ在线客服

    蛋切刀
    可乐上瘾
    妖异眼瞳
  • 服务电话

    4000-555-94113099998627
  • 联系地址

    昆明市官渡区岔街
    鸿运都市别墅5单元1101