【javaWeb】显示和隐藏div

最新推荐文章于 2023-01-09 16:48:44 发布

雪馨

最新推荐文章于 2023-01-09 16:48:44 发布

阅读量2.2k

点赞数 1

分类专栏： # javaWeb知识总结文章标签： javascript border div function input

本文链接：https://blog.csdn.net/xuexin25java/article/details/7802783

版权

javaWeb知识总结专栏收录该内容

38 篇文章 0 订阅

订阅专栏

一、效果展示
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、彩色标注突出重点

雪馨

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
【javaWeb】显示和隐藏div

一、效果展示1、初始状态，效果2、点击“显示或隐藏”连接，效果3、再次点击“显示或隐藏”连接，效果二、实现代码显示隐藏div function isShowSecond(firstId,secondId){ var flag = document.getElementById(firstId).value; if(f
复制链接

扫一扫

专栏目录