点击DIV，修改第二个p元素的背景色为"orange"

wsy-happy

于 2019-10-27 22:46:46 发布

阅读量158

点赞数

本文链接：https://blog.youkuaiyun.com/happywsyhgff/article/details/102773143

版权

本文介绍了一个使用HTML、CSS和jQuery实现的简单网页布局。在页面中，一个带有三个段落元素的div容器被设置为特定尺寸并具有灰色背景。通过jQuery，当div被点击时，第二个段落元素的背景颜色会变为橙色。此代码示例展示了如何结合使用静态HTML结构、样式和动态交互来创建响应式网页元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery.js"></script>
</head>
<style>
    div{
        width: 200px;
        height: 200px;
        background-color: darkgrey;
    }
</style>
<body>
<div>
    <p>我是第一个p元素</p>
    <p id="er">我是第二个p元素</p>
    <p>我是第三个p元素</p>
</div>
<script type="text/javascript">
    $(function(){
        $("div").on("click",function(){
            $("#er").css("background-color","orange");

        });
    });
</script>
</body>
</html>

效果
在这里插入图片描述