クリックすると切り替える

質問

JavaScript初心者です。

ボタンをクリックすると、下のHTMLの部分をきり替えたいです。
フレームを使用したくなく、Javascriptで制作したいのですが、うまくいきません。

■←ここを押すと（複数ボタンを配置予定）
□←ここが切り替わる

大変困っています。よろしくお願い致します！！

この投稿のマルチメディアは削除されているためご覧いただけません。

回答No.2

yambejp · ベストアンサー

最近のブラウザならCSSだけでもいけそうですが、
IE6はだめそうなのでbehaiviorを設定しておくということで

<style>
div.hide{display:none;}
div:target,div.target{display:block;}
div{
behavior:expression(this.className=location.hash=="#"+this.id?"target":"hide")
}

</style>

<ul>
<li><a href="#a">aaa</a></li>
<li><a href="#b">bbb</a></li>
<li><a href="#c">ccc</a></li>
<li><a href="#d">ddd</a></li>
</ul>
<div id="a" class="hide">contents a</div>
<div id="b" class="hide">contents b</div>
<div id="c" class="hide">contents c</div>
<div id="d" class="hide">contents d</div>

お礼

ありがとうございます！！
とっても分かりやすいです！
早速、作ってみます！

回答No.1

yyr446

画像のようなメニュー（タブメニュー）をjavascriptでフレームを
使わず実現するには、表示する部分とクリックするそれぞれのタイトル部分
をカテゴリー毎に<div>要素に入れておきます。
javascriptでタイトル部分の<div>がクリックされたイベントを検知して、
対応する表示する部分の<div>のstyle属性のdisplayプロパティをnoneと
blockにトグルさせる仕組みで実現できます。
それぞれの具体的な例は、ここにもたくさんでてると思います。

もし、面倒なのはいやだというなら、簡単に（タブメニュー）を設置する
ためのjavascriptライブラリーという物があります。
ライブラリーはいろいろなタイプのが多数ありますが、詳しい設置方法
はそのライブラリーのサイトにたいていていねいに説明されています。
便利そうなのをいくつかあげておきます。
ThickBox 3.1
http://jquery.com/demo/thickbox/
jQuery UI Tabs
http://jqueryui.com/demos/tabs/
jQuery Superfish
http://users.tpg.com.au/j_birch/plugins/superfish/

お礼

ありがとうございます。
詳しく書いて頂いて、本当に助かります！