JavaScriptは初心者で、ごく簡単な表示非表示切り替えや、画像きりかえぐらいしかできません。ご教示ください。
複数のボックスがあります。
このボックスは5ほどにカテゴリー分けがされており、一覧表示されています。タブのメニューで選択したら対応するカテゴリーのボックスのみが表示されるようにするには、一つのhtmlファイルとjavascriptだけでできますか。
http://oshiete1.watch.impress.co.jp/qa3018153.html
こちらの質問と回答を見たのですが、プルダウンメニューではなくaタグで切り替えたいです。class名で取得する方法も調べましたが、わかりませんでした。
よろしくお願いいたします。
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>
説明ができなてなくて申し訳ないです。
>タブ部分を<a>タグで表記したいということでしょうか?
そうです。まさに例に挙げていただいたとおりでした。プルダウンメニューでもaタグでも同じ処理ができるというところがよくわからなかったのですが、解決しました。どうもありがとうございます。
No.1
- 回答日時:
検索すれば例はいくらでもあると思うけど?
こういうイメージのものではないのかな?
http://archiva.jp/web/javascript/tab-menu.html
http://inspire.server101.com/js/tp/
ライブラリを利用した、もっと凝ったものもたくさんあります。
この回答への補足
ありがとうございます。
言葉足らずでした。例に挙げていただいたサンプルのようなものの場合、idで指定していて一つのカテゴリーに対応するのは一つのボックスのみになってしまうと思います。
カテゴリーに所属するボックスが複数ある場合は、http://oshiete1.watch.impress.co.jp/qa3018153.html こちらにあるような方法しかないのでしょうか。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- WordPress(ワードプレス) Wordpress テーマを編集 の編集する枠が表示されない 2 2022/11/19 11:07
- Excel(エクセル) Excelヘルプの原文を表示する最速の方法(手順)には? 1 2023/08/11 11:30
- Access(アクセス) Access2016でフォーム内にExcelの複数シートを 表示させるイメージで複数テーブルの デー 1 2022/11/25 15:30
- 教えて!goo ベストアンサー表示なのに回答受付中 4 2023/06/17 18:48
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- JavaScript HTML,JS初心者です。 2つのselectボックスが有り その選択の組み合わせにより 指定した文 3 2022/03/31 23:35
- WordPress(ワードプレス) ワードプレスで、投稿一覧ページにタグを表示する方法 投稿につけたタグを、記事一覧ページにもカテゴリと 1 2023/05/10 21:41
- Excel(エクセル) [クイックアクセスツールバー]の設定ファイルの格納場所について、 5 2023/04/21 14:43
- HTML・CSS HTMLのフォームについてお尋ねします 1 2022/12/03 21:47
- JavaScript HTML&CSS Javascriptによる動的テーブル 1 2023/03/27 19:51
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
javascriptテキストBOX色を元に...
-
MAX関数を使ってからLEFT JOIN...
-
自働生成される<div>タグに連番...
-
指定したパスが現URLに含まれて...
-
removeAttribute()メソッドで削...
-
クリックすると下に説明文が出...
-
リンク色を動的に変更したい。i...
-
ネストされたハッシュの値から...
-
iframe内からjQueryで指定したい
-
JavascriptでDIV~DIVをリロードで
-
プルダウンとチェックボックス...
-
checkboxにチェックを入れると...
-
テキストエリア内の一部の文字...
-
折りたたみ式JavaScriptをcheck...
-
背景色を一定時間ごとにランダ...
-
JSで動的にリンクを作成
-
javascriptでのアコーディオン...
-
複数のリンク画像を一定時間で...
-
ページ遷移後のcssプロパティ保持
-
IFRAMEの表示/非表示を切り替え...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
MAX関数を使ってからLEFT JOIN...
-
javascriptテキストBOX色を元に...
-
IFRAMEの表示/非表示を切り替え...
-
removeEventListenerについて
-
背景色を透明化
-
createElementで作成した要素を...
-
javascriptでpostした値が取得...
-
読み込んだQRコードをフォーム...
-
iframe内のリンクが飛ばないの...
-
jQueryでクリックされた要素のi...
-
ダブルクォーテーションが消え...
-
<div ~ </div> で囲まれたテキ...
-
【HP作成】クリックすると下...
-
<Div>の中の要素の数を調べる
-
jQueryで特定id以外の下にある...
-
VBScript+IEのチェックボック...
-
removeAttribute()メソッドで削...
-
折りたたみ部分にアンカーでリ...
-
onclickを利用した伸縮メニュー...
-
背景色を一定時間ごとにランダ...
おすすめ情報
