前提・実現したいこと
CSSの「position:absolute」で複数のboxを重ねて非表示にし、アンカー付きのtabで表示を切り替えるプログラムを作成中です。
これについて、ページ内リンクをクリックした際にmain直下のsectionの高さを変えるJavaScriptのコードをお伺いしたいです。
発生している問題・エラーメッセージ
現状、別ページからの遷移時に高さを変えることはできたのですが、ページ内リンクをクリックした際にmain直下のsectionの高さを変えることができておりません。
該当のソースコード
HTML
1<body> 2 3<main class="test"> 4<section class="sec1"> 5 <div class="width_box"> 6 <h1>テストページ</h1> 7 8<div class="schedule"> 9 <div id="tab01"> 10 <div id="tab02"> 11 <div id="tab03"> 12 <div id="tab04"> 13 14<ul id="tab"> 15 <li><a href="#tab01">tab1</a></li> 16 <li><a href="#tab02">tab2</a></li> 17 <li><a href="#tab03">tab3</a></li> 18 <li><a href="#tab04">tab4</a></li> 19</ul> 20 21<div class="contents"> 22 <div class="tab01"> 23 <section> 24 <h2>これはtab1の中身です</h2> 25 </section> 26 </div> 27 <div class="tab02"> 28 <section> 29 <h2>これはtab2の中身です</h2> 30 </section> 31 </div> 32 <div class="tab03"> 33 <section> 34 <h2>これはtab3の中身です</h2> 35 </section> 36 </div> 37 <div class="tab04"> 38 <section> 39 <h2>これはtab4の中身です</h2> 40 </section> 41 </div> 42</div> 43 44 </div> 45 </div> 46 </div> 47 </div> 48</div> 49 50 </div> 51 </section> 52</main> 53 54</body>
CSS
1.test .sec1 { 2 height: 2215px; 3 overflow: hidden; 4} 5/* ===== schedule =====*/ 6.test .schedule { 7 margin: 20px auto; 8 background: #efefef; 9} 10.test .schedule ul#tab { 11 list-style: none; 12 margin: 0; 13 overflow: hidden; 14 padding: 0; 15 width: 100%; 16 display: flex; 17} 18.test .schedule ul#tab li { 19 font-size: 1.3rem; 20 border-bottom: none; 21 margin: 0; 22 padding: 0; 23 text-align: center; 24} 25.test .schedule ul#tab li a { 26 display: block; 27 padding: .2em 1em; 28 color: #004690; 29 padding-top: 0.8rem; 30 min-height: 50px; 31} 32.test .schedule .contents { 33 position: absolute; 34} 35.test .schedule .contents div { 36 background: #fff; 37 margin: 0; 38 padding: 0; 39 position: absolute; 40 top: 0; 41} 42.test .schedule .contents div section { 43 margin-bottom: 20px; 44 width: 1000px; 45} 46.test .schedule #tab a:hover { 47 background: #aaa; 48 color: #fff; 49 -webkit-transition: background .5s; 50 transition: background .5s; 51} 52/* ===== schedule-tab 表示切替 =====*/ 53.test .schedule .contents div { 54 z-index: 1; 55 opacity: 0; 56} 57.test .schedule #tab li:first-child a { 58 background: #004690; 59 color: #fff; 60} 61.test .schedule .contents div:first-child { 62 opacity: 1; 63 z-index: 2; 64} 65.test .schedule #tab01:target .contents .tab01, 66.test .schedule #tab02:target .contents .tab02, 67.test .schedule #tab03:target .contents .tab03, 68.test .schedule #tab04:target .contents .tab04 { 69 opacity: 1; 70 -webkit-transition: opacity .5s; 71 transition: opacity .5s; 72 z-index: 2; 73} 74.test .schedule #tab01:target .contents div:not([class="tab01"]), 75.test .schedule #tab02:target .contents div:not([class="tab02"]), 76.test .schedule #tab03:target .contents div:not([class="tab03"]), 77.test .schedule #tab04:target .contents div:not([class="tab04"]) { 78 opacity: 0; 79 -webkit-transition: opacity .5s; 80 transition: opacity .5s; 81 z-index: 1; 82 display: none; 83} 84.test .schedule #tab01:target #tab li a[href$="tab01"], 85.test .schedule #tab02:target #tab a[href$="tab02"], 86.test .schedule #tab03:target #tab a[href$="tab03"], 87.test .schedule #tab04:target #tab a[href$="tab04"] { 88 background: #004690; 89 color: #fff; 90 -webkit-transition: background .5s; 91 transition: background .5s; 92} 93.test .schedule :not([id="tab01"]):target #tab li a[href$="tab01"] { 94 background: #efefef; 95 color: #004690; 96} 97.test .schedule :not([id="tab01"]):target #tab li a[href$="tab01"]:hover { 98 background: #aaa; 99 color: #fff; 100}
JavaScript
1 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 2 3 // ページ外からのリンク時の処理 4 <script> 5 $(window).on('load',function(){ 6 7 // ページ内アンカーの取得 8 var anc = location.hash 9 10 // URLのハッシュ値が同値の場合に実行する内容 11 if (anc == "#tab01"){ 12 $('.sec1').css({'height':'1650px'}) 13 } else if (anc == "#tab02"){ 14 $('.sec1').css({'height':'1670px'}) 15 } else if (anc == "#tab03"){ 16 $('.sec1').css({'height':'2240px'}) 17 } else if (anc == "#tab04"){ 18 $('.sec1').css({'height':'2400px'}) 19 } 20 }); 21 </script> 22 23 // ページ内からのリンク時の処理 24 <script> 25 $('#tab01').on('click',function(){ 26 $('.sec1').css({'height':'1650px'}) 27 }); 28 29 $('#tab02').on('click',function(){ 30 $('.sec1').css({'height':'1670px'}) 31 }); 32 33 $('#tab03').on('click',function(){ 34 $('.sec1').css({'height':'2240px'}) 35 }); 36 </script>
試したこと
リンク時のクラスの付け外しで対応しようとしたり、
JavaScript
1$('a[href^="#"]').click(function(){ 2 $(this).toggleClass("clicked"); 3});
リンク時にURLをチェックしてみようとしたのですが、
JavaScript
1$('a[href^="#"]').click(function(){ 2 3 // ページ内アンカーの取得 4 var anc = location.hash 5 6 if (anc == "#tab01"){ 7 $('.sec1').css({'height':'1650px'}) 8 } 9});
組み方が悪く、うまくできませんでした。
本当に初歩的な質問だとは思うのですが、どうすれば高さが変わるようになるのか、ご教授頂ければと思います。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/09/30 11:18