Q&A
コードがうまくコードブロックになっていないので、質問を編集し
「お力添えください。
```html
<!DOCTYPE html PUBLIC "-//……」となるようにしてください。
パソコンからなら右側にプレビューが表示されているはずなので確認しながら編集してください。
先程質問させて頂いた件の続きです。
Htmlでタブを変えると同時にページも変えたいのですが、タブが変わっても、ページが変わりません。どのように記述すれば良いでしょうか?
お力添えください。
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="text/css"> /* --- タブ（ラジオボタン）のエリア ------------------------ */ #tabArea{ line-height : 1; /* 1行の高さ */ letter-spacing : 0; /* 文字間 */ text-align : center; /* 文字位置は中央 */ } /* --- ラジオボタン ---------------------------------------- */ #tabArea input[type=radio] { display : none; /* ラジオボタン非表示 */ } /* --- ラジオボタン直後のlabel ----------------------------- */ #tabArea input[type=radio] + label { display : inline-block; position : relative; padding : 6px 10px; /* labelの余白 */ font-size : 12pt; /* タブの文字サイズ */ font-weight : bold; /* タブは太文字 */ border : 3px solid #999; /* 未選択タブのの枠線 */ border-bottom : none; /* 下罫線は消す */ border-radius : 5px 5px 0 0; /* タブの上左右角丸 */ margin : 0 1px; /* タブ間隔 */ background : #fff; /* 未選択タブの背景色 */ color : #666; /* 未選択タブの文字色 */ } /* --- 選択されたラジオボタン直後のlabel ------------------- */ #tabArea input[type=radio]:checked + label { border-color : #4682B4; /* 選択タブの枠線 */ color : #4682B4; /* 選択タブの文字色 */ cursor : default; /* デフォルトカーソル */ z-index : 2; /* 重なりを最前面へ */ } /* --- 未選択ラジオボタン直後のlabelにマウスが乗った ------- */ #tabArea input[type="radio"]:not(:checked) + label:hover { background : #b4cee2; /* カーソルタブの背景 */ cursor : pointer; /* リンクカーソル */ } /* --- タブ下の本体エリア ---------------------------------- */ .tabBody{ position : relative; border : 3px solid #4682B4; /* 本体の枠線 */ background : #fff; /* 本体の背景色 */ margin-top : -3px; /* タブと罫線分重ねる */ z-index : 1; /* 未選択タブより全面 */ } .auto-style1 { font-size: xx-small; } </style> </head> <body> <div id="tabArea"> <input type="radio" name="tab" id="tab1" onclick="tabClick(1)"> <label for="tab1">メニュー１<a target="Change" href="表示したいurl１"></a></label> <input type="radio" name="tab" id="tab2" onclick="tabClick(2)"> <label for="tab2">メニュー２<a target="Change" 表示したいurl2"></a></label> <input type="radio" name="tab" id="tab3" onclick="tabClick(3)"> <label for="tab3">TOPへ戻る<a target="Change"最初に表示したいurl"></a></label> <div class="tabBody"><p><iframe src="最初に表示したいurl"name="Change"scrolling="auto"frameborder="0"></iframe><p id="tabNo">タブ99</p> </div> <script type="text/javascript"> function tabClick(argTabNo) { document.getElementById("tabNo").innerHTML = "タブ" + argTabNo; } </script> </body> </html>
回答2件
0
ベストアンサー
元のソースを活かす形ですと、以下のような形にhtmlとjsを書き換えれば希望の動作になるかと思います。
youtubeはダミーですので書き換えていただければと思います????
<div id="tabArea"> <input type="radio" id="tab1" name="tab" onclick="tabClick('https://www.youtube.com/embed/wt6m_qb06hA')"> <label for="tab1">メニュー１</label> <input type="radio" id="tab2" name="tab" onclick="tabClick('https://www.youtube.com/embed/hQyzEyIf7P0')"> <label for="tab2">メニュー２</label> <input type="radio" id="tab3" name="tab" onclick="tabClick('https://www.youtube.com/embed/S2m0Pp5agT4')"> <label for="tab3">TOPへ戻る</label> <div class="tabBody"> <p> <!--最初に表示されるサイト--> <iframe id="tabNo" src="https://www.youtube.com/embed/tN0A6h9DqbU"></iframe> </p> </div> </div> <script type="text/javascript"> function tabClick(url) { document.getElementById("tabNo").setAttribute('src', url); } </script>
投稿2019/04/26 07:09
編集2019/04/26 07:32
退会済みユーザー
総合スコア0
0
いろいろと細かい問題がありそうですが、とりあえずここを直せば動くかと。
HTML
1<iframe src="最初に表示したいurl" name="Change" scrolling="auto" frameborder="0"></iframe>
なお、HTML5 では scrolling 属性、frameborder 属性はなくなっています。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/iframe
投稿2019/04/25 08:31
総合スコア13749
ありがとうございました。
今出先なので、明日確認させて頂きます。
ご指摘の記述を修正致しました。ありがとうございます。
質問が分かり辛かったので、Codeと質問内容を修正致しました。
なぜ<p id="tabNo">タブ99</p>を消したのかわかりませんが、ないものには入れられないでしょう。
何を書いているのかわかっていますか？
すいません。余計な部分まで消し込んでしまっていました。混乱させてしまいすいません。
ご指摘部分は元に戻しました。
また、Codeと質問内容も更新致しております。
あなたの回答
tips
プレビュー
