スタートページ＞ Javascript＞ jQueryの基礎

jQueryによる表示・非表示

ＨＴＭＬのある部分を表示・非表示反転をさせたいことがよくあります。
Javascriptだけでも可能ですが、jQueryの toggle メソッドを用いると、簡潔な記述ができますし、多様な機能が使えます。

インライン個所の表示・非表示

この例は、通常のJavascriptで作成した「表示・非表示」と同じ機能です。

次の［解答表示］の部分をクリックしてください。解答が表示されます。クリックを繰り返すと表示・非表示が反転します。

次の計算で正しいものはどれか。
　　ア　１＋１＝２
　　イ　１＋１＝３
［解答表示］

<script type="text/javascript">
    function 表示反転(対象ＩＤ) {                                         // Ａ
        var セレクタ = "#" + 対象ＩＤ;                                    // Ｂ
        $(セレクタ).toggle();                                             // Ｃ
    }
</script>

～<a href="Javascript:表示反転('解答');">［解答表示］</a>～         <!-- Ｄ --> 
<div id="解答" style="display:none">                                <!-- Ｅ -->
<p>正解は［ア］です。</p>
</div>

画像の表示・非表示

ボタンをクリックすると、画像がゆっくりと表示／非表示されます。 

<script>
    $(function(){                               // Ｆ
        $("#表示ボタン").click(function () {    // Ｇ
            $("#画像").toggle(5000);            // Ｈ
        });
    })
</script>

<p>～<button id="表示ボタン">画像表示</button><br>  <!-- Ｉ -->
<img id="画像" src="called/image1.jpeg" alt=""></p>        <!-- Ｊ -->