こんばんは、以下のURLを参考に1ページ内のコンテンツを切り替えようと試行錯誤したのですが、メニューをdivでくくってしているため、どのように記述したらよいかわからず困っています。
参考URL
http://builder.japan.zdnet.com/news/story/0,3800 …
左のメニューで右のメインコンテンツのレイヤーを切り替えられたいと思い作ったページです。実際に表示したい部分はコメントアウトしています。
floatでは、z-indexが使えないので無理やり、positionでレイアウトしていますが、よろしくおねがいします。
http://study.vs.land.to/index.html
No.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>
ありがとうございます。思った通りのイメージでした。上手く、ローカルでは、書き換えて表示できたので、アップロードしてみたいと思います。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS (Javascript)印刷するファイルに応じて印刷プレビュー画面で用紙を自動的に切り替えたい!! 2 2022/04/11 12:04
- AJAX 自作の地図をグーグルマップのようにしたい 3 2022/11/15 11:53
- HTML・CSS 吹き出し 下記の吹き出しのスタイルシートについて 下記のスタイルシートは左側にアイコンがでる使用にな 1 2022/11/12 17:55
- VR・AR YoutubeでVRゴーグル用の切り替えボタンが表示されない? VRゴーグル(中にスマホを入れるタイ 3 2022/10/20 10:27
- HTML・CSS トリミングで表示した画像をクリックで元どおりにしたい 3 2022/12/16 18:49
- Excel(エクセル) Excel 参照元の値を参照したい 1 2022/08/20 18:58
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- その他(ソフトウェア) 時間差でのオートクリック 1 2023/04/12 12:04
- アルバイト・パート バイトでタイムカードを切るタイミングが不満。 4 2023/05/06 14:20
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
【CSS】floatで左右に並べた...
-
divのheight指定で画面一杯に表...
-
クリッカブルマップとインライ...
-
3点リーダーの作り方
-
CSSでdivの縦幅を指定する方法
-
htmlのstyleのposition:relativ...
-
positionのrelativeとabsolute...
-
レイアウトが崩れないようにす...
-
オンマウス時に別画像を上に重...
-
HTMLですCSSです この画像のよ...
-
YES or NO形式で進んで行く、タ...
-
HTMLですCSSです 画像のように...
-
MAX関数を使ってからLEFT JOIN...
-
htmlの記述で link rel=styles...
-
画像の上に画像リンクを貼る方法
-
javascriptテキストBOX色を元に...
-
読み込んだQRコードをフォーム...
-
複数画像のランダム複数表示(...
-
Gifアニメ、最後のコマに行った...
-
Slick.jsのオプションrtlについて
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Ctrl+F(検索)の窓を出したいの...
-
フッター上部に謎の隙間
-
【CSS】floatで左右に並べた...
-
HTMLですCSSです この画像のよ...
-
css固定したフッターが本文と重...
-
CSS <div>の入れ子が反映さ...
-
スクロール可能なチェックボックス
-
textareaで入力した文字を改行...
-
オンマウス時に別画像を上に重...
-
文字を固定したいのですが…
-
スタイルシートで画面を上下に...
-
チェックボックスの背景色って...
-
フッターの下に隙間ができてしまう
-
文字をクリックしたら別の文字...
-
大分類・中分類・小分類
-
HTMLですCSSです 画像のように...
-
CSSでdivのheightを動的に
-
★★★フッター最下部固定/スクロ...
-
離れた場所にマウスオーバーで...
-
htmlのstyleのposition:relativ...
おすすめ情報