重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら>

電子書籍の厳選無料作品が豊富!

JavaScriptは初心者で、ごく簡単な表示非表示切り替えや、画像きりかえぐらいしかできません。ご教示ください。

複数のボックスがあります。
このボックスは5ほどにカテゴリー分けがされており、一覧表示されています。タブのメニューで選択したら対応するカテゴリーのボックスのみが表示されるようにするには、一つのhtmlファイルとjavascriptだけでできますか。

http://oshiete1.watch.impress.co.jp/qa3018153.html
こちらの質問と回答を見たのですが、プルダウンメニューではなくaタグで切り替えたいです。class名で取得する方法も調べましたが、わかりませんでした。

よろしくお願いいたします。

A 回答 (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>
    • good
    • 0
この回答へのお礼

説明ができなてなくて申し訳ないです。

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

お礼日時:2009/03/10 21:47

検索すれば例はいくらでもあると思うけど?



こういうイメージのものではないのかな?
 http://archiva.jp/web/javascript/tab-menu.html
 http://inspire.server101.com/js/tp/

ライブラリを利用した、もっと凝ったものもたくさんあります。

この回答への補足

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

補足日時:2009/03/09 16:44
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!