js实现点击显示或者隐藏相关内容代码下载

当前位置：首页 > 代码实例 > html5 css3代码分类 > 其他 > js实现点击显示或者隐藏相关内容代码下载

很多应用中，可能会有这样的效果，一些内容在默认状态下是隐藏的，当点击一个按钮就会将此内容显示出来，下面就通过代码实例简单介绍一下如何实现此效果，代码实例如下:

[ 其他 ] 运行代码下载代码

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.51qianduan.com/" />
<title>51前端</title>
<script type="text/javascript"> 
function $(idvalue){ 
  return document.getElementById(idvalue); 
} 
function showtext(){ 
  if($('text').style.display=='none'){ 
    $('text').style.display=''; 
    $("themore").value="隐藏内容";
  }
  else{ 
    $('text').style.display='none'; 
    $("themore").value="显示内容";
  } 
} 
window.onload=function(){
  var themore=document.getElementById("themore");
  themore.onclick=function(){
    showtext();
  }
}
</script> 
</head> 
<body> 
<div id="text" style="display:none;">51前端欢迎您</div> 
<input id="themore" type="button" value="查看信息" />
</body> 
</html>

代码描述：js实现点击显示隐藏相关内容。js实现点击显示或者隐藏相关内容代码下载

下载全部收藏

133 178

用户评论

大牛，别默默的看了，快登录帮我点评一下吧！:) 登录 | 注册