您的位置：首页 > 编程语言 > Java开发

【javaWeb】显示和隐藏div

2012-07-30 17:31 218 查看

一、效果展示

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、彩色标注突出重点

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript border div function input

相关文章推荐

新的分享

章节导航