特定の条件のHTML要素を一括で表示・非表示
お世話になっております。
javascript、または何らかの方法で、特定の条件にあうHTML要素のCSSプロパティを一括で書き換える方法を探しております。
Dreamweaverを使っているのでビヘイビアでできないか試してみましたが、ID単位で要素を扱うので複数のレイヤーを同時に表示・非表示することはできないようでした。
以下、やりたいことの一例です。下記のように、ボタンを押すとその条件に合わないclassの要素を「display:none」状態したいと考えています。
------------------------------------------------------------------
[イヌ表示ボタン] [ネコ表示ボタン] [両方表示ボタン]
<div class="dog">ダルメシアン</div>
<div class="cat">ロシアンブルー</div>
<div class="dog">柴犬</div>
<div class="dog">チワワ</div>
<div class="cat">シャム</div>
<div class="cat">ヒマラヤン</div>
<div class="cat"アビシニアン</div>
<div class="dog">ゴールデンレトリーバー</dog>
イヌ表示ボタンを押したときは、class="cat"がdisplay:noneになり、
のブラウザ上では犬だけがピックアップ表示される。
↓
<div class="dog">ダルメシアン</div>
<div class="dog">柴犬</div>
<div class="dog">チワワ</div>
<div class="dog">ゴールデンレトリーバー</dog>
------------------------------------------------------------------
実際にはボタンで操作するだけではなく、たとえば犬ページ、ネコページを同じコンテンツに更新し、ロードイベントだけ異なった記述をするだけで、それぞれのページに適切なコンテンツのみ表示をさせたりしたいと考えております。
恐れ入りますが、何卒、よろしくお願い致します。
お礼
ウヒョーサブサブゥ~!! 5度まで下がりました。明日の朝は初雪か? ブルブルです。 回答ありがとうございました。