ジメジメする梅雨のお悩み、一挙解決! >>

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

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

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

このQ&Aに関連する最新のQ&A

A 回答 (2件)

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

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

お礼日時:2009/05/26 21:58

ちなみにIE6では:target非対応のようですが、IE6を


捨てる勇気はありますか?
    • good
    • 0
この回答へのお礼

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

お礼日時:2009/05/26 01:11

このQ&Aに関連する人気のQ&A

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


人気Q&Aランキング