jQuery第五章课后作业

最新推荐文章于 2024-01-06 17:38:23 发布

suixinCaesar

最新推荐文章于 2024-01-06 17:38:23 发布

阅读量4.2k

点赞数 1

分类专栏： jQuery制作网页高级特效

本文链接：https://blog.csdn.net/suixinCaesar/article/details/81108873

版权

jQuery制作网页高级特效专栏收录该内容

14 篇文章

订阅专栏

这是一篇关于jQuery实践的作业，包括使用css()方法为图片添加边框效果，实现单击图片显示边框的功能。同时，文章介绍了如何制作林徽因简介页面，通过点击‘林徽因简介’链接展开简介内容，以及单击‘主要作品’链接展示相关作品。

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

4.使用css()方法添加图片边框，，单击图片显示图片边框。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用css()方法添加图片边框</title>
    <style>
        body{text-align: center;}
    </style>
</head>
<body>
    <img src="images/pic.gif">
</body>
<script src="js/jquery-1.12.4.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        $("img").click(function () {
            $("img").css("border","1px solid orange")
        })
    })
</script>
</html>

5.制作林徽因简介页面，点击“林徽因简介”链接显示简介内容，单击“主要作品”链接显示对应的作品。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>林薇因简介</title>
    <style>
        #h1,#h2{
            background: gray;
            color: white;
            text-align: center;
            height: 80px;
            line-height: 80px;
            font-size: 30px;
        }
        #div p{
            text-indent: 2em;
            line-height: 30px;
        }
        #div{display: none}
        #h2{
            font-size: 20px;
            height: 60px;
            line-height: 60px;
        }
        #p2{display: none}
    </style>
</head>
<body>
    <h1 id="h1">林徽因简介</h1>
    <div id="div">
        <p>林徽因，女，汉族，原名林徽音，出生于浙江杭州，祖籍福建福州。中国著名建筑家、诗人、作家。人民英雄纪念碑和中华人民共和国国徽深化方案的设计者</p>
        <p>林徽因是建筑师梁思成的第一任妻子。三十年代初，与夫婿梁思成用现代科学方法研究方法研究中国古代建筑，成为这个学术领域的开拓者。</p>
    </div>
    <h2 id="h2">主要作品</h2>
    <p id="p2">
        《你是人间四月天》<br>
        《宝莲灯》<br>
        《九十九度中》
    </p>
<script src="js/jquery-1.12.4.js"></script>
<script>
    $(function () {
        $("#h1").click(function () { //单击简介时
            $("div").show();
        })
        $("#h2").click(function () { //单击主要作品时
            $("#p2").show();
        })
    })
</script>
</body>
</html>