Q&A
ご回答だけでなく、励ましのお言葉までいただきありがとうございます。
感激です！
しかし、多分[ hide() ]が悪さしてるんだろうなぁ、と言うところまではわかるのですが、
なぜ、タブクリック時にのみ起動するはずなのに、ページ読み込み時に起動してしまうのか、が分かりません。
何度見直しても、ページを開いた直後は何も起こらないはずなのですが…。
前提・実現したいこと
jqueryでタブメニューの実装
お疲れ様です。
僭越ながら、ご質問させていただきます。
https://cocotsubu.com/2019/05/31/post-3179/
上記のサイトを参考に、jqueryでタブメニューを作っています。
ページを開いた、(読み込み時)に、なぜか、.ranking__items(タブ内のコンテンツ)に[display: none]が追加されてしまいます。
本来、タブをクリックした時に、一旦全てのタブに[display: none]が付与されてから、クリックしたものに対応した#(id)のもののみ、fadein()するものだと考えていますが、最初からタブに対応したコンテンツにhide()が適用されています。
$('.ranking__items').hide().filter(this.hash).fadeIn();
こちらの１行を削除すると、[display: none]の適用がなくなることから、この１行がタブをクリックしていないのに、ページ読み込み時に発動してしまっているものと考えられます。
なぜ、クリックしていないのに発動してしまうのか、分からずに困っております。
何卒、お助けいただければ幸いです。
宜しくお願い致します。
発生している問題
ページ読み込み時に、.ranking__items に style display:none が追加されてしまう
HTML
<div class="ranking__tab-box"> <div class="ranking__tab ranking__tab-current">人気ランキング</div> <div class="ranking__tab">おすすめ商品</div> <div class="ranking__tab">新商品</div> </div> <div id="items1" class="ranking__items"> <picture class="ranking__img-box"> <source media="(max-width: 639px)" srcset="img/ranking-1.jpg 2x"> <img src="img/ranking-1.jpg" srcset="img/ranking-1.jpg 2x" class="ranking__img" alt=""> <p class="ranking__item-name">商品名</p> <hr class="ranking__price-separate"> <p class="ranking__price">1,296<span class="ranking__yen"> 円(税込)</span></p> </picture> <picture class="ranking__img-box"> <source media="(max-width: 639px)" srcset="img/ranking-2.jpg 2x"> <img src="img/ranking-2.jpg" srcset="img/ranking-2.jpg 2x" class="ranking__img" alt=""> <p class="ranking__item-name">商品名</p> <hr class="ranking__price-separate"> <p class="ranking__price">1,296<span class="ranking__yen"> 円(税込)</span></p> </picture> <picture class="ranking__img-box"> <source media="(max-width: 639px)" srcset="img/ranking-3.jpg 2x"> <img src="img/ranking-3.jpg" srcset="img/ranking-3.jpg 2x" class="ranking__img" alt=""> <p class="ranking__item-name">商品名</p> <hr class="ranking__price-separate"> <p class="ranking__price">1,296<span class="ranking__yen"> 円(税込)</span></p> </picture> <picture class="ranking__img-box"> <source media="(max-width: 639px)" srcset="img/ranking-4.jpeg 2x"> <img src="img/ranking-4.jpg" srcset="img/ranking-4.jpeg 2x" class="ranking__img" alt=""> <p class="ranking__item-name">商品名</p> <hr class="ranking__price-separate"> <p class="ranking__price">1,296<span class="ranking__yen"> 円(税込)</span></p> </picture> </div> <div id="items2" class="ranking__items"> <picture class="ranking__img-box"> <source media="(max-width: 639px)" srcset="img/ranking-1.jpg 2x"> <img src="img/ranking-1.jpg" srcset="img/ranking-1.jpg 2x" class="ranking__img" alt=""> <p class="ranking__item-name">商品名</p> <hr class="ranking__price-separate"> <p class="ranking__price">1,296<span class="ranking__yen"> 円(税込)</span></p> </picture> <picture class="ranking__img-box"> <source media="(max-width: 639px)" srcset="img/ranking-2.jpg 2x"> <img src="img/ranking-2.jpg" srcset="img/ranking-2.jpg 2x" class="ranking__img" alt=""> <p class="ranking__item-name">商品名</p> <hr class="ranking__price-separate"> <p class="ranking__price">1,296<span class="ranking__yen"> 円(税込)</span></p> </picture> <picture class="ranking__img-box"> <source media="(max-width: 639px)" srcset="img/ranking-3.jpg 2x"> <img src="img/ranking-3.jpg" srcset="img/ranking-3.jpg 2x" class="ranking__img" alt=""> <p class="ranking__item-name">商品名</p> <hr class="ranking__price-separate"> <p class="ranking__price">1,296<span class="ranking__yen"> 円(税込)</span></p> </picture> <picture class="ranking__img-box"> <source media="(max-width: 639px)" srcset="img/ranking-4.jpeg 2x"> <img src="img/ranking-4.jpg" srcset="img/ranking-4.jpeg 2x" class="ranking__img" alt=""> <p class="ranking__item-name">商品名</p> <hr class="ranking__price-separate"> <p class="ranking__price">1,296<span class="ranking__yen"> 円(税込)</span></p> </picture> </div> <div id="items3" class="ranking__items"> <picture class="ranking__img-box"> <source media="(max-width: 639px)" srcset="img/ranking-1.jpg 2x"> <img src="img/ranking-1.jpg" srcset="img/ranking-1.jpg 2x" class="ranking__img" alt=""> <p class="ranking__item-name">商品名</p> <hr class="ranking__price-separate"> <p class="ranking__price">1,296<span class="ranking__yen"> 円(税込)</span></p> </picture> <picture class="ranking__img-box"> <source media="(max-width: 639px)" srcset="img/ranking-2.jpg 2x"> <img src="img/ranking-2.jpg" srcset="img/ranking-2.jpg 2x" class="ranking__img" alt=""> <p class="ranking__item-name">商品名</p> <hr class="ranking__price-separate"> <p class="ranking__price">1,296<span class="ranking__yen"> 円(税込)</span></p> </picture> <picture class="ranking__img-box"> <source media="(max-width: 639px)" srcset="img/ranking-3.jpg 2x"> <img src="img/ranking-3.jpg" srcset="img/ranking-3.jpg 2x" class="ranking__img" alt=""> <p class="ranking__item-name">商品名</p> <hr class="ranking__price-separate"> <p class="ranking__price">1,296<span class="ranking__yen"> 円(税込)</span></p> </picture> <picture class="ranking__img-box"> <source media="(max-width: 639px)" srcset="img/ranking-4.jpeg 2x"> <img src="img/ranking-4.jpg" srcset="img/ranking-4.jpeg 2x" class="ranking__img" alt=""> <p class="ranking__item-name">商品名</p> <hr class="ranking__price-separate"> <p class="ranking__price">1,296<span class="ranking__yen"> 円(税込)</span></p> </picture> </div> -------------------------------------------------- CSS &__tab-box { border-bottom: 1px solid $default-blue; color: $default-blue; display: flex; margin-top: 10px; } &__tab { border-radius: 8px 8px 0 0; cursor: pointer; flex-basis: 33.333%; text-align: center; padding: 5px 0; } &__tab-current { background: $default-blue; color: #ffffff; } &__items { display: flex; padding-top: 30px; } &__img-box { display: table; margin-right: 10px; flex-basis: 25%; } &__img { object-fit: cover; width: 100%; height: 100%; } &__item-name { padding: 10px 0; } &__price { padding-top: 10px; } &__yen { color: gray; font-size: 12px; } &__see-more-box { text-align: center; padding: 30px 0; } ------------------------------------------- jQuery $('.ranking__tab').click(function () { // おそらく↓この行に原因あり $('.ranking__items').hide().filter(this.hash).fadeIn(); $('.ranking__tab').removeClass('ranking__tab-current'); $(this).addClass('ranking__tab-current'); return false; });
HTML CSS jQuery
試したこと
原因と思われるコードをコメントアウトし、原因箇所の特定。
しかし、原因箇所の何が悪いのかわかりませんでした。
補足情報（FW/ツールのバージョンなど）
jqueryは、ver 3.5.1を使用しております。
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
回答2件
0
ベストアンサー
リンク先を参考にしたということですが、同じになってませんね。
リンク先のタブにはaリンク要素がありそのurlハッシュでコンテンツとリンクさせてます。.filter(this.hash)の部分です。
質問のHTMLにはaリンク要素がないのでこれは使えません。よって、
$('.ranking__items').hide().filter(this.hash).fadeIn();
の部分は hide() のみ実行されて、.fadeIn()は対象がないので実行されません。
hide()は要素のスタイルにdisplay:noneを追加するという処理ですので、結局すべてのコンテンツが非表示のままということになります。
対処法としてはリンク先のようにタブ内にa要素の追加してurlハッシュを設定するか、タブのインデックスで対応するコンテンツと関連付けるかになります。.eq($(this).index())
タブのインデックスを使用する場合のコード例。
js
1$('.ranking__tab').click(function () { 2 $('.ranking__items').hide().eq($(this).index()).fadeIn(); 3 $('.ranking__tab').removeClass('ranking__tab-current'); 4 $(this).addClass('ranking__tab-current'); 5 return false; 6}).filter(':eq(0)').click();
投稿2021/01/17 06:14
総合スコア34073
0
こんにちは。
特定した行は、複数の関数がチェーンになっていますよね。
分解して1行ずつ実行するようにしたら分かると思います。
もっと言うと、関数名って基本的に暗号でなく英語で機能に準じた名前を付けます。
では、display: none が付く とはどんな意味なのかを考えると、
どの関数が悪さをしているのか当たりが付くと思います。
頑張ってください。
投稿2021/01/17 05:02
編集2021/01/17 05:03
退会済みユーザー
総合スコア0
申し訳ございません、質問文に載せているjQueryに誤りがありました。
$('.ranking__tab').click(function () {
$('.ranking__items').hide().filter(this.hash).fadeIn();
$('.ranking__tab').removeClass('ranking__tab-current');
$(this).addClass('ranking__tab-current');
return false;
}).filter(':eq(0)').click();
実際には、質問文内のものの後ろに、
.filter(':eq(0)').click();
が付きます。
調べてみて分かったのですが、この、
.filter(':eq(0)').click();
が、起動時にタブコンテンツ0番目( id="items1" )をクリックする動きをしている、と言うことはわかりました。
これによりタブ内のコンテンツ全てに、hide()が適用されていることも理解しました。
しかし、今度は、hide() のあと、[ .filter(this.hash).fadeIn(); ]が発動し、クリックしたタブのIDを取得し、fadeIn()させてくれるはずなのに、なぜ動かないのか、が分かりません。
長くなってしまいましたが、ご回答いただけましたら幸いです。
宜しくお願い致します。
一歩一歩進んでいる感じがとても良いです。
追加質問分については、hatena19さんの回答で行けると思います。
Chrome DevTool等で確認すると【なぜ動かないのか→プログラムが止まってしまうのか】を調べる術が分かると思います。
https://www.google.com/search?sxsrf=ALeKk00byuRdKMW00ktf05LLI_Po6AmiDQ%3A1610865483180&ei=S9sDYOzOCqST1e8P9pGO2AY&q=chrome+%E3%83%87%E3%83%99%E3%83%AD%E3%83%83%E3%83%91%E3%83%BC%E3%83%84%E3%83%BC%E3%83%AB+%E3%83%96%E3%83%AC%E3%83%BC%E3%82%AF%E3%83%9D%E3%82%A4%E3%83%B3%E3%83%88&oq=chrome+%E3%83%87%E3%82%A3%E3%83%99%E3%83%AD%E3%83%83%E3%83%91%E3%83%BC%E3%83%84%E3%83%BC%E3%83%AB+&gs_lcp=CgZwc3ktYWIQAxgAMgcIIxCxAhAnMgQIABAKMgYIABAEEAoyBAgAEAoyBAgAEAoyBAgAEAoyBAgAEAoyBAgAEApQ8RRY8RRgti9oAHAAeACAAVOIAZ4BkgEBMpgBAKABAaoBB2d3cy13aXrAAQE&sclient=psy-ab
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/01/17 06:46