JavaScript实现点击按钮隐藏和显示div模块内容。这样的场景在实际项目中还是用的比较多的,那么如何来实现呢?以下就是web前端教程网给大家总结的代码教程希望能够帮助到大家。
效果如下:
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>web前端教程-新起点博客</title>
<style type="text/css">
#thediv{
width:200px;
height:100px;
background:darkred;
}
a{
color: #fff;
}
li{
list-style:none;
}
</style>
<script type="text/javascript">
window.onload=function(){
var obt=document.getElementById("bt");
var odiv=document.getElementById("thediv");
obt.onclick=function(){
if(odiv.style.display=="none"){
odiv.style.display="block";
obt.value="隐藏模块";
}
else{
odiv.style.display="none";
obt.value="显示模块";
}
}
}
</script>
<body>
<input type="button" id="bt" value="显示模块"/>
<div id="thediv" style="display:none">
<li><a href="">按钮一</a></li>
<li><a href="">按钮二</a></li>
</div>
</body>
</html>
评论前必须登录!
注册