一覧をタブメニューで絞り込んで表示

このQ&Aのポイント
  • JavaScript初心者のため、表示非表示切り替えや画像の変更などの基本的な操作しかできません。
  • 複数のカテゴリーに分かれたボックスの一覧を、タブメニューで選択したカテゴリーのボックスのみ表示する方法を教えてください。
  • プルダウンメニューではなくaタグを使用してタブ切り替えを行いたいが、class名で要素を取得する方法がわからない。
回答を見る
  • ベストアンサー

一覧をタブメニューで絞り込んで表示

JavaScriptは初心者で、ごく簡単な表示非表示切り替えや、画像きりかえぐらいしかできません。ご教示ください。 複数のボックスがあります。 このボックスは5ほどにカテゴリー分けがされており、一覧表示されています。タブのメニューで選択したら対応するカテゴリーのボックスのみが表示されるようにするには、一つのhtmlファイルとjavascriptだけでできますか。 http://oshiete1.watch.impress.co.jp/qa3018153.html こちらの質問と回答を見たのですが、プルダウンメニューではなくaタグで切り替えたいです。class名で取得する方法も調べましたが、わかりませんでした。 よろしくお願いいたします。

  • muika
  • お礼率85% (6/7)

質問者が選んだベストアンサー

  • ベストアンサー
  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.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>

muika
質問者

お礼

説明ができなてなくて申し訳ないです。 >タブ部分を<a>タグで表記したいということでしょうか? そうです。まさに例に挙げていただいたとおりでした。プルダウンメニューでもaタグでも同じ処理ができるというところがよくわからなかったのですが、解決しました。どうもありがとうございます。

その他の回答 (1)

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.1

検索すれば例はいくらでもあると思うけど? こういうイメージのものではないのかな?  http://archiva.jp/web/javascript/tab-menu.html  http://inspire.server101.com/js/tp/ ライブラリを利用した、もっと凝ったものもたくさんあります。

muika
質問者

補足

ありがとうございます。 言葉足らずでした。例に挙げていただいたサンプルのようなものの場合、idで指定していて一つのカテゴリーに対応するのは一つのボックスのみになってしまうと思います。 カテゴリーに所属するボックスが複数ある場合は、http://oshiete1.watch.impress.co.jp/qa3018153.html こちらにあるような方法しかないのでしょうか。

関連するQ&A

  • タブメニューの解除方法

    http://archiva.jp/web/javascript/tab-menu.html 上記アドレスにあるタブを使用したいと思っているのですが、 タブ表示、そうではない一覧表示をプルダウンにて切り替えが 出来ればなぁと考えております。 どなたか方法を教えていただければと思います。 宜しくお願いいたします。

  • CGIフォームでのformタグとjavaでのformタグが重複して…

    フォーム(CGI)で入力するするときに、カテゴリと言う項目を作って、プルダウンでそれぞれ大カテゴリ・中カテゴリ・小カテゴリと分けてそのカテゴリにあった項目を吐き出したいのですが、 ネットで調べましたら、JavaScriptで表示ができるとの事で、試行錯誤の結果、ちゃんと表示できるようになったのですが、CGIフォーム内でのformタグとjavaでのformタグが重複してプルダウン内のカテゴリが表示しなくなりました…。 私のやりたい方法としては、「教えて!goo」での投稿カテゴリーの様な方法(http://oshiete1.goo.ne.jp/oshiete_new.php3)でできればベストと考えております。 解決方法としてはどの様な方法がありますか? 皆さんお忙しいでしょうけど、ご教授下さい。

  • disableとすることなく、ユーザによる変更操作をjavascriptで無効化する方法を教えて下さい。

    <selectタグで作ったプルダウンメニューと、 <input type="checkbox"で作ったチェックボックスとについて教えて下さい。 何れも、disableとすると表示色が変わり、 しかも、プルダウンメニューの方は <formを介して送信されるvalueが正常ではない場合があるようです。 そこで、プルダウンメニューとチェックボックスとの何れも、 disableとすることなく、ユーザによる変更操作をjavascriptで無効化したいのですが、やり方が分かりません。 ご存じの方、どうかよろしくお願い致します。

  • プルダウンメニューからチェックボックスを表示したい

    php、javascript、mysqlを使用し、プルダウンで選択後、チェックボックスを表示させる仕組みを作りたいのですが、 どうすればよいのか分かりません。 どなたか力を貸して頂きたく思います。 例えば下記のようなTBLがあったとします。 ■TBL:oya  oyaコード  10  20  30 ■TBL:ko  oyaコード    koコード  10        1100  10        1200  10        1300  20        2100  20        2200  30        3100 TBL 「oya」 をプルダウンメニューにセット。 プルダウンメニューを選択する度にTBL 「ko」を呼び出し、同ページ内にチェックボックスとして表示させたいと考えています。 例) ・10が選択されたら  「1100」、「1200」、「1300」のチェックボックスを表示する プルダウンメニューへのセットは出来たのですが、プルダウン選択後の「ko」を呼び出す箇所が分かりません。 php Mysql javascript で実現したいと考えております。 サンプルページでもいいですので、何かありましたら教えて下さい。 お分かりになる方よろしくお願いいたします。

  • Firefoxで全タブを縦に一覧表示できるアドオン

    Firefoxで全タブを縦に一覧表示できるアドオンを探しています。 Chromeの「Tab Menu」に当たるものです。 http://ameblo.jp/googlechrome/entry-10491669263.html Firefoxにも似た「Tabs Menu」というアドオンがあるのですが、 こちらの方はタブ一覧からタブを閉じることができないからダメなのです。 開き過ぎたタブ(数百)を縦表示の一覧からどんどん閉じていきたいのです。 どなたかよいアドオンをご存知の方いましたら教えてください。 よろしくお願いします。

  • WEBブラウザで、ページを戻っても最後に表示したタブ切替コンテンツ(javascriptで作成)を表示する方法を教えてください。

    javascriptで、ページ遷移せずに内容をタブ切替できるページを作成していますが、別ページへリンクしたあと、ブラウザでの「戻る」やjavascriptの「history.back」で戻ったときにタブコンテンツが最後の状態で表示できる方法がありましたら教えてください。 そのページはECサイトの商品紹介のページで、一覧のカテゴリをタブで切り替えられるようにしています。 一覧から詳細ページへ遷移し、そこから一覧へ戻った時に、最後に見ていた内容がリセットされてしまうことを回避したいです。 ユーザーはついさっきまで見ていた内容にたどり着くまでに不要な煩わしさが生じてしまうので良くないのです。 どうぞよろしくお願いいたします。

  • プルダウンメニューで中央表示

    プルダウンメニューで中央表示 HTMLのプルダウンメニューで文字を中央寄せにすることは可能でしょうか? ページのレイアウト上、ボックスの幅を広くとっていて、 リストの文字が端によりすぎてしまうので、中央に表示したいのですが、 tableタグなどで使えるalignのようなものはないのでしょうか。 ご存知の方、教えていただけると助かります。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • selectボックスのプルダウンメニューを上方向へ表示する方法

    すみません、どなたか教えて下さい。 selectボックスのプルダウンメニューを上方向へ表示することは可能でしょうか? ハンディーターミナル用に開発しているのですが、ページ下の方にあるプルダウンを選択すると1度ページ移動?するため、プルダウンのメニューが表示されず、2度選択しないといけません。 JavaScriptで対応可能でしょうか?それとも何か別の対策があれば教えて下さい、よろしくお願いします。

  • Word2002で表示されないタブがあり操作できません

    Word2002で挿入メニューの参照から索引と目次ダイアログボックスを表示し引用文献一覧タブを使おうと思ったら、引用文献一覧タブが表示されません。どうしたら表示されるのでしょうか。ユーザー設定ダイアログボックスのコマンドタブには、ちゃんと表示されているのですが・・・。 どうぞよろしくお願い致します。

  • チェックボックスのチェックを入れたものを再表示する

    はじめまして。 phpを少しだけコピペプログラミングしたことがある者です。 今mixiアプリに挑戦しているのですが、 JavaScriptは全く知らないので困っています。 http://oshiete1.goo.ne.jp/qa4374471.html を見ましたがちょっと違うようです。 作りたいものはphpなら下記のようなものです。 http://www.pahoo.org/e-soul/webtech/php02/php02-20-01.shtm (プログラムを実行するをクリックしてみてください) 最終的にやりたいことは、マイミクの一覧を表示する際、 各マイミクの横にチェックボックスを設け、 チェックを入れたマイミクのみを再表示するというものですが、 とりあえずは、JavaScriptで チェックボックスのチェックを入れたものを再表示するやり方を教えてください。