はじめまして！
HTML、Javascript、jQueryの初心者です。
以下のプログラムで、
最初にimage/1.jpgが表示され
マウスをクリックすると
image/2-1.jpgが表示されるようにしたいのですが
最初の画面から変わりません…

３時間ほどサイトを見てあれこれ試したのですがだめでした。。
どうぞよろしくお願いいたします。

<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
    </style>
    <meta name="description" content=""/>
    <link rel="stylesheet" href="css/style.css">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

</head>

<body>
    <!--ボタンの画像表示-->
    <p class="button">
    <img style="width: 100%;" src="image/1.jpg" alt="ボタン"  >
    </p>

    <pp class="note">
    <img style="width: 100%;" src="image/2-1.jpg" alt="ノート" >
    </pp>

    <!--ボタンを押したら選択画面-->
    <script type="text/javascript">
        $(function()
        {
            $('p').click(function(){
                $('pp').show();
            });
        });  
    </script>

</body>
</html>