前提・実現したいこと
ページ内タブを実装したく下記のサイトを参考にして見た所、タブ1からタブ3へのページ内リンクが効かなくて困っております。
https://blog-and-destroy.com/7389
ご教授頂ければ幸いです
html
1<!--タブ--> 2<ul class="tab-group" id="group-top"> 3 <li class="tab is-active">タブ1</li> 4 <li class="tab">タブ2</li> 5 <li class="tab">タブ3</li> 6 <li class="tab">タブ4</li> 7 <li class="tab">タブ5</li> 8 <li class="tab">タブ6</li> 9 <li class="tab">タブ7</li> 10</ul> 11 12<!--タブを切り替えて表示するコンテンツ--> 13<div class="panel-group"> 14 <div class="panel is-show"> 15 <div class="box1"> 16 <div class="box-inner"> 17 <h2>タイトル</h2> 18 <div class="container1"> 19 <h3>タイトル</h3> 20 <p>この文章はダミーです。</p> 21 <div class="flex"> 22 </div><!--.flex--> 23 24 <p>この文章はダミーです。<a href="#page-link1">この文章はダミーです。</a>へ</p><!--タブ2のリンク先へ飛ばしたい--> 25 26 <h4>タイトル</h4> 27 <p>この文章はダミーです。</p> 28 <img src="" alt=""> 29 <a class="support-list" href="#group-top">タブ一覧へ</a> 30 </div><!--.container1--> 31 </div> 32 </div><!--.box1--> 33 34 35 </div> 36 37 <div class="panel"> 38 </div> 39 <div class="panel"> 40 <div class="box1"> 41 <div class="box-inner"> 42 <h2>タイトル</h2> 43 <div class="container1"> 44 <h3>タイトル</h3> 45 <p>この文章はダミーです。</p> 46 <div class="column"> 47 <h5>この文章はダミーです。</h5> 48 <h5>この文章はダミーです。</h5> 49 <h5>この文章はダミーです。</h5> 50 </div><!--.column--> 51 <h4>タイトル</h4> 52 <div class="flex"> 53 <p>この文章はダミーです。</p> 54 <div><img src="" alt=""></div> 55 </div> 56 <a class="support-list" href="#group-top">タブ一覧</a> 57 </div><!--.container10--> 58 </div> 59 </div><!--.box1--> 60 61 <div class="box2"> 62 <div class="box-inner"> 63 64 <h2 id="page-link1">タイトル</h2><!--ここにページ内リンクをつけたい--> 65 66 <div class="container1"> 67 <h3>タイトル</h3> 68 <p>この文章はダミーです。</p> 69 <div class="column"> 70 <div><p>この文章はダミーです。</p></div> 71 <div><p>この文章はダミーです。</p></div> 72 </div><!--.column--> 73 <a class="support-list" href="#group-top">タブ一覧へ</a> 74 </div><!--.container11--> 75 </div> 76 </div><!--.box2--> 77 </div> 78 <div class="panel"> 79 </div> 80 <div class="panel"> 81 </div> 82 <div class="panel"> 83 </div> 84 <div class="panel"> 85 </div> 86</div>
css
1/* タブ */ 2.tab-group{ 3 display: flex; 4 justify-content: center; 5 padding:0; 6 max-width:980px; 7 margin:auto; 8} 9.tab{ 10 flex-grow: 1; 11 list-style:none; 12 text-align:center; 13 cursor:pointer; 14 width:calc(100% / 7); 15 height:80px; 16 font-size:0.6em; 17 position:relative; 18 padding-top:70px; 19 color:#ccc; 20 box-sizing:border-box; 21} 22.panel-group{ 23 border-top:none; 24} 25.panel{ 26 display:none; 27} 28.tab.is-active{ 29 color:#000; 30 transition: all 0.2s ease-out; 31} 32.panel.is-show{ 33 display:block; 34} 35 36/* タブ内 */ 37 38#group-top{ 39 padding-top:120px; 40 margin-top:-120px; 41} 42#page-link1{ 43 padding-top:20px; 44 margin-top:-20px; 45} 46.panel{ 47 margin-top:50px; 48} 49.box1{ 50 background-color:#fbfaf8; 51 padding:50px 0; 52} 53.box2{ 54 padding:50px 0; 55} 56 57h2{ 58 font-size:1em; 59 background-color:#1e3c69; 60 color:#fff; 61 line-height:2; 62 padding-left:15px; 63 font-weight:400; 64 max-width:1000px; 65 margin:auto; 66} 67h3{ 68 font-size:1.4em; 69 color:#1e3c69; 70 font-weight:400; 71} 72h4{ 73 margin:50px auto 0; 74 border-bottom:dotted 2px #4d4d4d; 75 padding-bottom:20px; 76} 77a{ 78 text-decoration:none!important; 79} 80.support-list{ 81 display:block; 82 width:300px; 83 border:solid 1.5px #1e3c69; 84 text-align:center; 85 padding:5px; 86 margin:50px 0 50px auto; 87 color:#1e3c69; 88 box-sizing:border-box; 89} 90.container1{ 91 max-width:950px; 92 margin:auto; 93} 94 95
javascript
1jQuery(function($){ 2 $('.tab').click(function(){ 3 $('.is-active').removeClass('is-active'); 4 $(this).addClass('is-active'); 5 $('.is-show').removeClass('is-show'); 6 // クリックしたタブからインデックス番号を取得 7 const index = $(this).index(); 8 // クリックしたタブと同じインデックス番号をもつコンテンツを表示 9 $('.panel').eq(index).addClass('is-show'); 10 }); 11}); 12 13//追加コード 14jQuery(function($){ 15 $('#page-link1').click(function(){ 16 $('.tab:first-child').removeClass('is-active'); 17 $('.tab:nth-child(3)').addClass('is-active'); 18 $('.is-show').removeClass('is-show'); 19 $('.panel:nth-child(3)').addClass('is-show'); 20 }); 21}); 22
回答1件
あなたの回答
tips
プレビュー