jQueryゼロから / toggle (クリックで表示・非表示を切り替える)


最近使うこと増えたので知識の上書きアップデートも兼ねてゼロからやり直してみる。
まずはGoogleCDN使って読み込むところから。

1
2
3
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
google.load("jquery", "1.4.2");
google.load("jqueryui", "1.8.4");

└まとめていろいろ読み込む場合

1
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

└個別に読み込む場合

簡単にできるトグルから試してみる。

1
2
3
4
<div id="toggle">
<span></span>
<span style="display: none;"></span>
</div>

こんな感じで二つの同一要素を片方だけ display: none にしておいて、クリックで入れ替えるなら下記のようにします。

1
2
3
4
5
<script type="text/javascript">
$('#toggle').click(function(){
$(this).find('span').toggle();
});
</script>

<span> のところを <img> とかで使うことが多いかな。

サンプル

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です