- ベストアンサー
一覧をタブメニューで絞り込んで表示
- JavaScript初心者のため、表示非表示切り替えや画像の変更などの基本的な操作しかできません。
- 複数のカテゴリーに分かれたボックスの一覧を、タブメニューで選択したカテゴリーのボックスのみ表示する方法を教えてください。
- プルダウンメニューではなくaタグを使用してタブ切り替えを行いたいが、class名で要素を取得する方法がわからない。
- muika
- お礼率85% (6/7)
- JavaScript
- 回答数2
- ありがとう数3
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
No1です。 どうもイメージがわきませんね。 ＞プルダウンメニューではなくaタグで切り替えたいです タブ部分を<a>タグで表記したいということでしょうか？ カテゴリーの切り替えのため（？）の文字表示なので、別に<a>タグという記述法にこだわることもないと思いますが？ （やりたいことが、不明ですが、他のタグでできれば、<a>タグでも可能だとは思いますが） <a>タグで記された部分をクリックすると「カテゴリー」が切り替わるということ？ ＞一つのカテゴリーに対応するのは一つのボックスのみになってしまうと思います。 グルーピングさえちゃんとしていれば、いくつでも処理は可能です。 でも、複数のボックス（ボックスの意味が不明ですが）を一つずつ処理するよりも、グループを1まとめで処理する方が簡単です。 （HTMLでまとめて<div>などでくくっておくとか、あるいはclassなどでまとめておくとか） 方法的には参考にされている質問の内容と同じような方法になると思いますが… なんせ「タブのメニュー」、「複数のボックス」、「一覧表示」のイメージがわかんないので、山勘と推理を重ねて、こんなん？ （まったくの、あてずっぽだから見当はずれの可能性大） <html> <head> <style type="text/css"> .tab { padding:4px; border:1px solid gray; text-decoration:none;} #itiran { margin-top:4px; width:600px; padding:10px; border:1px solid gray;} #itiran div { width:130px; height:60px; padding:8px; float:left; margin:20px; border:2px solid CornflowerBlue;} .group1{ background-color:LightSalmon;} .group2{ background-color:PapayaWhip;} .group3{ background-color:PaleGreen;} </style> <script type="text/javascript"> function hoge(gr) { var elm=document.getElementById('itiran').firstChild; while (elm){ if (elm.className){ elm.style.display = (elm.className==gr)?'block':'none'; } elm=elm.nextSibling; } return false; } </script> </head> <body> <a href="" class="tab" onclick="return hoge('group1')">タブ1</a> <a href="" class="tab" onclick="return hoge('group2')">タブ2</a> <a href="" class="tab" onclick="return hoge('group3')">タブ3</a> <div id="itiran"> 【 一覧表示 】<br> <div class="group1">ボックス1<br>（グループ1）</div> <div class="group1">ボックス2<br>（グループ1）</div> <div class="group2">ボックス3<br>（グループ2）</div> <div class="group3">ボックス4<br>（グループ3）</div> <div class="group2">ボックス5<br>（グループ2）</div> <div class="group3">ボックス6<br>（グループ3）</div> <div class="group1">ボックス7<br>（グループ1）</div> <div class="group3">ボックス8<br>（グループ3）</div> <div class="group1">ボックス9<br>（グループ1）</div> </div> </body> </html>
その他の回答 (1)
- fujillin
- ベストアンサー率61% (1594/2576)
検索すれば例はいくらでもあると思うけど？ こういうイメージのものではないのかな？ http://archiva.jp/web/javascript/tab-menu.html http://inspire.server101.com/js/tp/ ライブラリを利用した、もっと凝ったものもたくさんあります。
補足
ありがとうございます。 言葉足らずでした。例に挙げていただいたサンプルのようなものの場合、idで指定していて一つのカテゴリーに対応するのは一つのボックスのみになってしまうと思います。 カテゴリーに所属するボックスが複数ある場合は、http://oshiete1.watch.impress.co.jp/qa3018153.html こちらにあるような方法しかないのでしょうか。
お礼
説明ができなてなくて申し訳ないです。 ＞タブ部分を<a>タグで表記したいということでしょうか？ そうです。まさに例に挙げていただいたとおりでした。プルダウンメニューでもaタグでも同じ処理ができるというところがよくわからなかったのですが、解決しました。どうもありがとうございます。