１ページ内のコンテンツをタブメニューで切り替えたい。

質問

こんばんは、以下のURLを参考に１ページ内のコンテンツを切り替えようと試行錯誤したのですが、メニューをdivでくくってしているため、どのように記述したらよいかわからず困っています。
参考URL
http://builder.japan.zdnet.com/news/story/0,3800079086,20387833,00.htm

　左のメニューで右のメインコンテンツのレイヤーを切り替えられたいと思い作ったページです。実際に表示したい部分はコメントアウトしています。
floatでは、z-indexが使えないので無理やり、positionでレイアウトしていますが、よろしくおねがいします。

http://study.vs.land.to/index.html

回答No.2

yambejp · ベストアンサー

IE6でjavascriptをつかうんだったら、結局全部javascriptでやっても
同じような気がします。

とはいえ、今回の件はこんな感じのことでしょうか？

<style>
#menu_set{float:left;}
#menu_set div{
background-Color:lime;
border:10px outset #666666;
height:60px;
line-height:60px;
text-align:center;
width:120px;
}
#menu_set div a:hover{border:10px inset #666666;}
#contents_t{background-Color:white;}
#contents_r{background-Color:red;}
#contents_b{background-Color:blue;}
#contents_y{background-Color:yellow;}

#contents_t,#contents_r,#contents_b,#contents_y{
position:absolute;
margin-left:140px;
border:10px outset #666666;
height:300px;
width:440px;
z-index:1;
}
#contents_t:target,#contents_r:target,#contents_b:target,#contents_y:target{z-index:2;}
</style>
<div id="menu_set">
<div id="menu1">
<a href="#contents_t">TOP</a>
</div>
<div id="menu2">
<a href="#contents_r">RED</a>
</div>
<div id="menu3">
<a href="#contents_b">BULE</a>
</div>
<div id="menu4">
<a href="#contents_y">YELLOW</a>
</div>
</div>
<div id="contents_t">
test1
</div>
<div id="contents_r">
test2
</div>
<div id="contents_b">
test3
</div>
<div id="contents_y">
test4
</div>

お礼

ありがとうございます。思った通りのイメージでした。上手く、ローカルでは、書き換えて表示できたので、アップロードしてみたいと思います。

回答No.1

yambejp

ちなみにIE6では:target非対応のようですが、IE6を
捨てる勇気はありますか？

お礼

ご意見ありがとうございます。捨てる勇気はありませんが、学ぶ意欲はあります。
javascriptとcssを駆使して、IE6で表現できる別の方法も今後、模索して行きたいと考えますが、今は、:targetを使用しての記述の仕方を知りたいです。