Q&A
質問です。Htmlで、各ページを変える時にタブメニューを作って、ページを変えるようにしたいと思っています。下記ホームページを参考にしましたが、タブを押しても、ページが差し替わりません。
加えて、ホームページ上の「使用したJavascript」の記述が、認識出来ていないのか?
文字として標準されてしまいます。
何が間違っているのでしょうか?
恐れ入りますが、ご教授願います。
https://webparts.cman.jp/button/tab/
このホームページを参照させてもらいました。
<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; /* 未選択タブより全面 */ } </style> </head> <body> <div id="tabArea"> <input type="radio" name="tab" id="tab1" onclick="tabClick(1)" checked> <label for="tab1">タブ1</label> <input type="radio" name="tab" id="tab2" onclick="tabClick(2)"> <label for="tab2">タブ2</label> <input type="radio" name="tab" id="tab3" onclick="tabClick(3)"> <label for="tab3">タブ3</label> <div class="tabBody"><p>サンプル</p><p id="tabNo">タブ1</p></div> </div> </body> // ------------------------------------------------------------ // タブがクリックされた // ------------------------------------------------------------ function tabClick(argTabNo){ document.getElementById("tabNo").innerHTML = 'タブ'+argTabNo; } </html> コード
回答1件
0
ベストアンサー
仰る通り、js箇所が認識できていないようです。
js箇所を以下のように書き換えて、</body>の直前に入れてみてください。
<script type="text/javascript"> function tabClick(argTabNo) { document.getElementById("tabNo").innerHTML = "タブ" + argTabNo; } </script>
投稿2019/04/25 01:55
退会済みユーザー
総合スコア0
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/04/25 02:00