1. 程式人生 > >第五章初識jQuery課後作業

第五章初識jQuery課後作業

1.使用css()方法新增圖片邊框,單擊圖片顯示圖片bian邊框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <img src="imgs/pic.gif" class="tup"/>
    <script src="js/jquery-3.3.1.js"></script>
    <script>
        $(function () {
           $(".tup").click(function () {
               $(".tup").css("border","1px solid");
           });
        });
    </script>

</body>
</html>

2.製作林微因簡介頁面,單擊林微因簡介連結顯示簡介內容,單擊主要作品連結顯示對應的作品

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>林微因簡介</title>
    <style>
        h1{
            color: white;
            background: orangered;
        }
    </style>
</head>
<body>
    <h1 class="yi">林徽因簡介</h1>
    <div class="jian">
        <p>林徽因,女,漢族,原名林徽音,出生於浙江杭州,祖籍福建福州。中國著名建築家、詩人、作家。人民英雄紀念碑和中華人民共和國國徽深化方案的設計者</p>
        <p>林徽因是建築師樑思成的第一任妻子。三十年代初,與夫婿樑思成用現代科學方法研究方法研究中國古代建築,成為這個學術領域的開拓者。</p>
    </div>
    <h1 class="er">主要作品</h1>
    <div class="zuo">
        <p>《你是人間四月天》</p>
        <p>《寶蓮燈》</p>
        <p>《九十九度中》</p>
    </div>
    <script src="js/jquery-3.3.1.js"></script>
    <script>
        $(function () {
           $(".jian") .hide();
           $(".zuo").hide();
           $(".yi").click(function () {
              $(".jian").show();
           });
           $(".er").click(function () {
              $(".zuo").show();
           });
        });
    </script>
</body>
</html>