`
wsql
  • 浏览: 11794751 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
文章分类
社区版块
存档分类
最新评论

【javaWeb】显示和隐藏div

 
阅读更多
一、效果展示
1、初始状态，效果

2、点击“显示或隐藏”连接，效果


3、再次点击“显示或隐藏”连接，效果

二、实现代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>显示隐藏div</title>
<script type="text/javascript">
function isShowSecond(firstId,secondId){
var flag = document.getElementById(firstId).value;
if(flag == 'false'){
　 document.getElementById(secondId).style.display="";
document.getElementById(firstId).value="true";
}else{
document.getElementById(firstId).value="false";
document.getElementById(secondId).style.display="none";
}
}
</script>
</head>
<body>
<div style="width:150px;height：31px;border: 1px solid red;">
<input type="hidden" id="firstDiv"value="false" />
<a href="javascript:isShowSecond('firstDiv','secondDiv')" style="width:100px;height：31px; border: 1px solid red;">显示或隐藏
</a>
<div id="secondDiv" style="display: none; padding-left: 30px;">
<div style="width:100px;height：31px; border: 1px solid red;">
<a href="javascript:">二级div</a>
</div>
<div style="width:100px;height：31px; border: 1px solid red;">
<a href="javascript:">二级div2</a>
</div>
</div>
</div>
</body>
</html>
备注：
1、本示例未关注样式
2、彩色标注突出重点
分享到：
| 如何成为一名出色的ERP工程师
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics