Q&A
プログラムコード(およびエラーメッセージ)は質問内容としては最も重要な部分であるため、見やすくしていただけると助かります。<code>ボタン押下→「コード」部分にコードを貼り付け→「ここに言語を入力」に対象言語名記入（エラーメッセージの場合は不要）の手順で「コードハイライト化」してください。（質問編集画面ではリアルタイムでプレビューが表示されるので見ながら調整してください）
html初心者のものです。
以下の簡易プログラムを作成しましたが、<div id="tabView1">と<div id="tabView2">の部分を<div class=>に書き換えたいです。
どのようにcssを変えればよいのでしょうか。
どなたかご教示をお願いします。
html
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-31j"> <link rel="stylesheet" href="./r.css"> </head> <body> <h3>今回のイベントは</h3> <div class="tab-content"> <input type="radio" id="tab1" name="tab" checked> <label for="tab1">楽しかった</label> <input type="radio" id="tab2" name="tab"> <label for="tab2">楽しくなかった</label> <h3>その理由は</h3> <div class="tab-box"> <div id="tabView1"><select name="version"> <option value="Ａ">Ａ</option> <option value="Ｂ">Ｂ</option> <option value="Ｃ">Ｃ</option> </select> </div> <div id="tabView2"><select name="version"> <option value="Ｘ">Ｘ</option> <option value="Ｙ">Ｙ</option> <option value="Ｚ">Ｚ</option> </select> </div> <h3>満足度は</h3> <div id="tabView1"><input type="radio" name="result" value="100">100 <input type="radio" name="result" value="80">80 <input type="radio" name="result" value="60">60 </div> <div id="tabView2"><input type="radio" name="result" value="40">40 <input type="radio" name="result" value="20">20 <input type="radio" name="result" value="0">0 </div> </div> </div> </body> </html>
css
.tab-content > .tab-box > div { display: none; } #tab1:checked ~ .tab-box > #tabView1 { display: block; } #tab2:checked ~ .tab-box > #tabView2 { display: block; }
回答1件
0
ベストアンサー
質問が大惨事になっているので想像で答えます。
css の
css
1#tab1:checked ~ .tab-box > #tabView1{ 2 ～ 3}
の部分を
css
1#tab1:checked ~ .tab-box > .tabView1{ 2 ～ 3}
に書き換えればOKです。
tabView2 についても同様。
次投稿するときはMarkdown記法で投稿してください。
投稿2018/09/05 12:05
総合スコア1086
あなたの回答
tips
プレビュー
