header直下の同階層にdiv要素が2つあるのですが、なぜかdiv(tabtitle)の中にdiv(tabNav)が入る形になってしまいます。
マークアップ的に問題のありそうなところが見当たらず、div(tabtitle)とdiv(tabNav)が入れ子になる原因が特定できません。
どこに問題があるのかわかる方はいますでしょうか。
HTML
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="./css/tab2.css"> <link rel="stylesheet" href="./css/reset.css"> <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet"> <script src="./js/vendor/jquery-1.10.2.min.js"></script> <script src="./js/vendor/jquery-ui-1.10.3.custom.min.js"></script> <script src="./js/tab2.js"></script> <title>test!!</title> </head> <body> <section class="tabWrapper" id="tabWrapper"> <header> <div class="tabTitle"> <h1>タブ作成練習</h1> </div> <div class="tabNav"> <ul> <li class="act"> <p>tab1</p> </li> <li class="act"> <p>tab2</p> </li> <li class="act"> <p>tab3</p> </li> <li class="act"> <p>tab4</p> </li> <li class="act"> <p>tab5</p> </li> </ul> </div> </header> <div class="tabs"> <div class="tab"> <img src="img/kanade7trim.jpg"> </div> <div class="tab"> <img src="img/yui2trim.jpg"> </div> <div class="tab"> <img src="img/kanade8trim.jpg"> </div> <div class="tab"> <img src="img/shuko4trim.jpg"> </div> <div class="tab"> <img src="img/shiki2trim.jpg"> </div> </div> </section> </body> </html>
CSS
* { color: #333; } * { color: inherit; } ul { list-style: none; } a { text-decoration: none; } .tabWrapper { width: 100%; } header { position: relative; width: 100%; } .tabTitle { height: 300px; } .tabTitle h1{ font-size: 37px; } .tabNav { width: 100%; height: 100px; background-color: rgb(225, 238, 240); position: relative; } .tabNav ul { display: flex; justify-content: center; align-items: center; height: 100px; } .tabNav li { font-size: 26px; line-height: 100px; width: 200px; text-align: center; background-color: #d8d8d8; } .tabNav li:hover { background-color: rgb(95, 92, 92); color: #fff; } .tabNav li.active { background-color: rgb(180, 73, 73); color: #fff; } .tabNav li:not(:first-child){ margin-left: 1px; } .tabs { position: relative; } .tabs .tab { position: absolute; height: 500px; width: 100%; display: none; } .tabs .tab.active { display: block; } .tabs img { width: 100%; }
追記
JS
$(function () { var duration = 1000; //初期表示 $(".tabNav li:nth(0)").addClass("active"); $(".tab:nth(0)").addClass("active"); $(".tabNav li").click(function(){ var index = $(".tabNav li").index(this); $(".tabNav li.act").removeClass("active"); $(this).addClass("active"); $(".tabNav li").removeClass("active").eq(index).addClass("active"); $(".tabs .tab").removeClass("active").eq(index).addClass("active"); }); });
回答1件
あなたの回答
tips
プレビュー