js实现点击div隐藏相应部分，再次点击显示

最新推荐文章于 2024-08-17 11:12:57 发布

画一生情入颜容

最新推荐文章于 2024-08-17 11:12:57 发布

阅读量2.1w

点赞数 6

文章标签： javascript 显示隐藏div 点击

本文链接：https://blog.csdn.net/csdn_zsdf/article/details/76686292

版权

本文介绍如何使用JavaScript实现点击div元素，控制相应部分的显示与隐藏。通过监听点击事件，动态改变detail的显示状态，同时提供了一个获取指定类名元素的函数。示例中，点击list会展示detail，再次点击则隐藏。

摘要由CSDN通过智能技术生成

首先看一下html和css的结构：

<style>
#nav_left{
    width:120px;
    height:600px;
    background-color:#333;
    margin-left:0px;
}
.list {
    color:#fff;
    padding:10px;
    font-size:18px;
}

.list:hover{
    cursor:pointer;
    color:red;
}

.detail p{
    font-size:16px;
    right: 10px;
    padding-top:10px;
}

.detail p:hover{
    color:#fff;
}

</style>

<body>
<div class = "nav_top">
    <div class = "right">
        <img src = "./img/surf.jpg">&nbsp;&nbsp;
         <span> 欢迎:${requestScope.name}</span>
     </div>
</div>

<div id = "nav_left">

        <div class = "list">
            系统管理
            <img src="./images/heshang.png">
        </div>
        <div class = "detail">
                    <p>系统</p>
                    <p>系统</p>
                    <p>系统</p>
        </div>

        <div class = "list">
            日程管理
            <img src="./images/heshang.png">
        </