jQuery第五章課後作業

suixinCaesar發表於2018-07-19
jQuery

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>

 

相關文章