jQueryで表示と非表示の切り替えについて

質問

趣味の写真ギャラリーサイトの制作を行っており、トップページには以下のようにサムネイルを配置しております。

<nav>
<div id="haru">春の画像の表示</div>
<div id="natsu">夏の画像の表示</div>
<div id="aki">秋の画像の表示</div>
<div id="fuyu">冬の画像の表示</div>
<div id="jitensya">自転車の画像の表示</div>
<div id="umi">海の画像の表示</div>
<div id="koibito">恋人の画像の表示</div>
<div id="yuki">雪の画像の表示</div>
</nav>
<div id="content">
<div class="thumb haru"><a href="#"><img src="img/haru.png" alt="春の画像"></a></div>
<div class="thumb natsu"><a href="#"><img src="img/natsu.png" alt="夏の画像"></a></div>
<div class="thumb aki"><a href="#"><img src="img/aki.png" alt="秋の画像"></a></div>
<div class="thumb fuyu"><a href="#"><img src="img/fuyu.png" alt="冬の画像"></a></div>
<div class="thumb haru jitensya"><a href="#"><img src="img/haru.png" alt="春と自転車の画像"></a></div>
<div class="thumb natsu umi"><a href="#"><img src="img/natsu.png" alt="夏と海の画像"></a></div>
<div class="thumb aki koibito"><a href="#"><img src="img/aki.png" alt="秋と恋人の画像"></a></div>
<div class="thumb fuyu yuki"><a href="#"><img src="img/fuyu.png" alt="冬と雪の画像"></a></div>
</div>

とりあえずid="content"内に全画像（サムネイル）を配置（表示）しておき、以下のようなことを行いたいのですが…

id="haru" クリック時、class="haru"以外の要素に"display:none;"を追加…
id="natsu" クリック時、class"natsu"以外の要素に"display:none;"を追加…
id="aki" クリック時、class="aki"以外の要素に"display:none;"を追加…
id="fuyu" クリック時、class="fuyu"以外の要素に"display:none;"を追加…
id="jitensya"…
id="umi"…
id="koibito"…
id="yuki"…

classをタグのように使い、画像の表示と非表示を切り替える上手い手を探しております。jQueryでdisplay:noneを追加したり、toggleを使って元の状態に戻したりすることは可能でしたが、haruクリック後にnatsuをクリックすると期待通りに動きが得られなかったりと、60のおじいちゃんにはお手上げです。

解決法をjQueryの達人にご教授頂ければ幸いです。if文と呼ばれる、showの時にhide、hideの時はshowなど、そういったことが必要な気がしております。どうぞ宜しくお願いいたします。

回答No.1

piraippi

ドットインストールというプログラムを動画で説明してくれるサイトがあります。

こちらのサイトで、jQueryを学ばれてはどうですか？
ログインしなくてもひと通りの動画が見られますので、
jQueryだけではなく、css3、html , java , php , cakephp いろいろなプログラム系言語が
学べます。

[dotinstall]
http://dotinstall.com/

[jQuery]
http://dotinstall.com/lessons/basic_jquery

頑張ってください。