質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

548閲覧

タブの切り替えでのページ内リンク

nakajima4

総合スコア11

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2019/08/05 08:38

編集2019/08/06 03:02

前提・実現したいこと

ページ内タブを実装したく下記のサイトを参考にして見た所、タブ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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2019/08/05 08:51

ご自身が適用されているCSSもご提示ください
nakajima4

2019/08/05 09:11

情報不足で申し訳ございませんでした。 現状のcssも追加いたしました。
guest

回答1

0

ベストアンサー

タブの切り替えは効いてます。
タブ2を選んだ時に表示される予定のpanelクラスを持つdivタグの中身が空っぽなだけです。

html

1 </div> 2 </div><!--.box1--> 3 4 5 </div> 6 7 <div class="panel"> //タブ2 8 </div> 9 <div class="panel"> //タブ3 10 <div class="box1"> 11 <div class="box-inner"> 12 <h2>タイトル</h2>

投稿2019/08/05 09:37

zushi0905

総合スコア683

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

nakajima4

2019/08/05 10:27

すみません、私の間違いで、タブ1からタブ2ではなくてタブ3でした。 回答いただいたのに申し訳ございませんでした。 なので、タブ切り替えはできていて、タブ1の<a href="#page-link1">この文章はダミーです。</a>からタブ3の中にある<h2 id="page-link1">タイトル</h2>へページ内リンクをつけたのですが、そのリンクが飛べない状態になってしまいました。
zushi0905

2019/08/05 10:42

そういうことでしたか。ようやく理解出来ました。 リンクが飛べないという問題ですが、このページのタブがどのように出来ているか理解できていますか? jQueryを使ってブロックを表示非表示切り替えることで出来ています。リンクを貼ってクリックする事で指定の要素の位置まで移動出来たとしても非表示のままなので画面に表示されるわけありません。 もし実装するなら、jQueryのイベントをaタグに実装して表示非表示を切り替えてから指定idへ飛ぶようにしてください。
nakajima4

2019/08/06 02:23 編集

ご指摘ありがとうございます。 aタグにクリックイベントをつけたところ見事リンクすることができました。 しかし、全てのaタグに適応されてしまいました。 #page-link1でにすると動作しなくなるのですが、解決策がありましたら、ご教授いただけると助かります。
zushi0905

2019/08/06 02:38

タブの部分はtabクラスを持っており、is-activeクラスを付けることで有効化無効化を表しています。 今回追加したaタグのイベント時にis-activeクラスをremoveし、タブ3の要素の所にis-activeクラスを追加してあげれば出来ます。 追加したイベントのセレクタにaタグ全部が指定してありますが、他の要素にも適応してバグをうむ可能性が高いので気をつけて下さいね!
nakajima4

2019/08/06 02:59

ご指摘いただいた通り書き換えたところタブのアクティブの切り替えができました。 当たり前ですが、クリックイベントがaタグ全てに適応されてしまい、全てのタブ一覧のaタグをクリックするとタブ3のトップになってしまい、そのタブのトップに行けなくなってしまいました。 #page-link1で指定したところ反応しなくなってしまい、特定のaタグを指定してクリックイベントを実現する方法はありますでしょうか?
zushi0905

2019/08/06 03:18 編集

ここはjQueryの基本のセレクタの問題です。aタグのイベントを実装できている所から、jQueryの基本は出来ていると見受けられます。どこが問題か見つける力を養う為にもすぐ質問で聞くのは勿体無いと思いますよ。 #page-link1のセレクタはどこを指していますか?
nakajima4

2019/08/06 03:47

ありがとうございます、無事解決しました。 リンク先のセレクタを指定しても反応しないのは当たり前でした。 aタグにクラスを付与してそれを指定したところうまくいきました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問