Q&A
ご提示のコードを試してみましたが、問題なく動作するようでした。
ご提示いただいていない部分に原因があるか、ローカルでは動作するがサーバ上で動作しないということであれば、もしかするとキャッシュが働いているのかもしれないですね。スーパーリロードなどはお試しになりましたか？
実現したいこと
コーディング初心者です。恐れ入ります。ご鞭撻のほど、賜れれば幸いです。
ページが読み込まれた際に「タブメニューが全て閉じている」というのが現状です。
これを「ページが読み込まれた際に『最初のタブメニューは開いた状態」」にしたいです。
発生している問題・分からないこと
jQueryで「.on('load'」時にaddclassがされるように書いたつもりですが・・・・機能してないようで。
解決方法が分かり兼ねております。
恐れ入ります。私の見解誤り・確認不足だったようで、「.on('load'」は問題なく機能しておりました。
タブメニューの前にdivが入ると、ページが読み込まれた際に「タブメニューが全て閉じてしまっている」というのが現状でした。これを「ページが読み込まれた際に『最初のタブメニューは開いた状態』」にしたいです。
※下記の該当のソースコードを「『nekora様が保管くださったコード』に当該div部分(<div class="price-title-container">)を加えたコード」に変更させて頂いております。
［文字数の関係で、影響がないとわかったスライダー・ハンバーガーメニューのjsは割愛致しております。］
該当のソースコード
HTML
1<!DOCTYPE html> 2<html lang="jp"> 3 <head> 4 <title>タブメニュー初期表示時オープン</title> 5 <script src="https://kit.fontawesome.com/26c6772bd8.js" crossorigin="anonymous"></script> 6 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script> 7 <!-- スクロールしたら文字色が変わる --> 8 <script src="js/midnight.jquery.js"></script> 9 <!-- タブメニュー --> 10 <script src="js/tab-menu.js"></script> 11 <!-- スクロールしたら文字色が変わる --> 12 <script> 13 $(document).on('ready', function() { 14 $('.change-color').midnight(); 15 }); 16 </script> 17 18 <style> 19 .price { 20 height: 100vh; 21 width: 100%; 22 } 23 .price .price-title-container { 24 writing-mode: vertical-rl; 25 display: flex; 26 margin: 0 auto; 27 padding-top: 76px; 28 } 29 .price .price-title-container .main-title { 30 font-size: 1.5rem; 31 font-weight: bold; 32 letter-spacing: 0.3rem; 33 margin: 0; 34 color: rgba(255, 255, 255, 0.7); 35 text-shadow: 0px 0px 8px #000, 0px 0px 8px #000; 36 } 37 .price .price-title-container .sub-title { 38 font-size: 1.5rem; 39 text-combine-upright: all; 40 margin: 0; 41 padding-top: 0.5rem; 42 color: rgba(255, 255, 255, 0.7); 43 text-shadow: 0px 0px 8px #000, 0px 0px 8px #000; 44 } 45 46 /* ーーータブメニュー ーーーー*/ 47 /*tabの形状*/ 48 .tab{ 49 display: flex; 50 flex-wrap: wrap; 51 font-family: "shinryu", sans-serif; 52 font-weight: 400; 53 font-style: normal; 54 margin-left: 40px; 55 } 56 .tab li a{ 57 display: block; 58 background:#ddd; 59 margin:0 2px; 60 padding:10px 20px; 61 } 62 /*liにactiveクラスがついた時の形状*/ 63 .tab li.active a{ 64 background:#fff; 65 } 66 /*エリアの表示非表示と形状*/ 67 .area { 68 display: none; 69 opacity: 0; 70 background: #fff; 71 margin-left: 40px; 72 padding:50px 20px; 73 font-family: "shinryu", sans-serif; 74 font-weight: 400; 75 font-style: normal; 76 } 77 /*areaにis-activeというクラスがついた時の形状*/ 78 .area.is-active { 79 display: block; 80 animation-name: displayAnime; 81 animation-duration: 2s; 82 animation-fill-mode: forwards; 83 } 84 85 @keyframes displayAnime{ 86 from { 87 opacity: 0; 88 } 89 to { 90 opacity: 1; 91 } 92 } 93 /* ーーータブメニュー終了ーーーーーー*/ 94 </style> 95 </head> 96 97 <body> 98 <section class="price scroll-area" data-midnight="shadow"> 99 <div class="price-title-container"> 100 <p class="main-title">料金</p> 101 <p class="sub-title">price</p> 102 </div> 103 <ul class="tab"> 104 <li><a href="#menber2">2名様</a></li> 105 <li><a href="#menber3">3名様</a></li> 106 <li><a href="#menber4">4名様</a></li> 107 <li><a href="#menber5">5名様</a></li> 108 <li><a href="#menber6">6名様</a></li> 109 </ul> 110 <div id="menber2" class="area"> 111 <table> 112 <tr> 113 <th>紅葉</th> 114 <th>水面</th> 115 <th>音色</th> 116 <th>紅葉茶</th> 117 <th>滝の音</th> 118 <th>雪花</th> 119 <th>囲炉裏</th> 120 <th>太平</th> 121 </tr> 122 <tr> 123 <th>38,500円</th> 124 <th>41,800円</th> 125 <th>38,500円</th> 126 <th>33,000円</th> 127 <th>41,800円</th> 128 <th>41,800円</th> 129 <th>36,300円</th> 130 <th>36,300円</th> 131 </tr> 132 </table> 133 </div> 134 <div id="menber3" class="area"> 135 <table> 136 <tr> 137 <th>紅葉</th> 138 <th>水面</th> 139 <th>音色</th> 140 <th>紅葉茶</th> 141 <th>滝の音</th> 142 <th>雪花</th> 143 <th>囲炉裏</th> 144 <th>太平</th> 145 </tr> 146 <tr> 147 <th>36,300円</th> 148 <th>39,300円</th> 149 <th>36,300円</th> 150 <th>30,800円</th> 151 <th>39,600円</th> 152 <th>39,600円</th> 153 <th>34,100円</th> 154 <th>34,100円</th> 155 </tr> 156 </table> 157 </div> 158 <div id="menber4" class="area"> 159 <table> 160 <tr> 161 <th>紅葉</th> 162 <th>水面</th> 163 <th>音色</th> 164 <th>紅葉茶</th> 165 <th>滝の音</th> 166 <th>雪花</th> 167 <th>囲炉裏</th> 168 <th>太平</th> 169 </tr> 170 <tr> 171 <th>34,100円</th> 172 <th>37,400円</th> 173 <th>34,100円</th> 174 <th>28,600円</th> 175 <th>37,400円</th> 176 <th>37,400円</th> 177 <th>31,900円</th> 178 <th>31,900円</th> 179 </tr> 180 </table> 181 </div> 182 <div id="menber5" class="area"> 183 <table> 184 <tr> 185 <th>紅葉</th> 186 <th>水面</th> 187 <th>音色</th> 188 <th>紅葉茶</th> 189 <th>滝の音</th> 190 <th>雪花</th> 191 <th>囲炉裏</th> 192 <th>太平</th> 193 </tr> 194 <tr> 195 <th>31,900円</th> 196 <th>35,200円</th> 197 <th>31,900円</th> 198 <th>-</th> 199 <th>35,200円</th> 200 <th>35,200円</th> 201 <th>-</th> 202 <th>-</th> 203 </tr> 204 </table> 205 </div> 206 <div id="menber6" class="area"> 207 <table> 208 <tr> 209 <th>紅葉</th> 210 <th>水面</th> 211 <th>音色</th> 212 <th>紅葉茶</th> 213 <th>滝の音</th> 214 <th>雪花</th> 215 <th>囲炉裏</th> 216 <th>太平</th> 217 </tr> 218 <tr> 219 <th>-</th> 220 <th>33,000円</th> 221 <th>-</th> 222 <th>-</th> 223 <th>33,000円</th> 224 <th>33,000円</th> 225 <th>-</th> 226 <th>-</th> 227 </tr> 228 </table> 229 </div> 230 </section> 231 232 <script> 233 //任意のタブにURLからリンクするための設定 234 function GethashID (hashIDName){ 235 if(hashIDName){ 236 $('.tab li').find('a').each(function() { 237 var idName = $(this).attr('href'); 238 if(idName == hashIDName){ 239 var parentElm = $(this).parent(); 240 $('.tab li').removeClass("active"); 241 $(parentElm).addClass("active"); 242 //表示させるエリア設定 243 $(".area").removeClass("is-active"); 244 $(hashIDName).addClass("is-active"); 245 } 246 }); 247 } 248 } 249 250 //タブをクリックしたら 251 $('.tab a').on('click', function() { 252 var idName = $(this).attr('href'); 253 GethashID (idName); 254 return false; 255 }); 256 257 // 上記の動きをページが読み込まれたらすぐに動かす 258 $(window).on('load', function () { 259 $('.tab li:first-of-type').addClass("active"); 260 $('.area:first-of-type').addClass("is-active"); 261 var hashName = location.hash; 262 GethashID (hashName); 263 }); 264 </script> 265 </body> 266</html>
試したこと・調べたこと
- teratailやGoogle等で検索した
- ソースコードを自分なりに変更した
- 知人に聞いた
- その他
上記の詳細・結果
teratailで「タブメニュー」や「タブメニュー 開いたまま」や「タブメニュー ロード」で検索しましたが、同様事例を見つけられませんでした。
補足
特になし
一応、回答で付けましたが、Lhankor_Mhyが仰るように、提示された部分でだけなら問題なく動きますね。
詳しくは当方の回答をご参照ください。
Lhankor_Mhy様、nekora様、ご検討・ご鞭撻ありがとうございました。
また、私の質問投稿させて頂いたコードの事前確認不足があり、大変申し訳ありませんでした。
確認頂いた結果に合わせ原因箇所の再検討を行いました。
結果、・・・、申し訳ありません。私が当たりをつけていた「.on(load」には問題無く、・・・・今回提示した「<ul class="tab">の直情にあるdivタグ」部分があると読み込み時にタブメニューが閉じてしまうことが分かりました。
改めて問題のdiv部分を含めた状態で質問投稿させて頂きます。
もしよろしければ、改めてご鞭撻頂ければ幸いです。
ベストアンサーになてしまったんですが、dandelion0626様がご自分で選ばれましたか？
であれば、問題はまだ解決していないのでベストアンサーは選ぶべきではありません、
手動でベストアンサーを解除してください。
質問は編集できるので、そこで、DIVタグ付きでLOAD時にうまくいかないというコードに書き換えていただければ
そのコードを見てここがおかしいですよとアドバイスを書き込めます。
もし、システムが勝手にベストアンサーに選んでしまっているようなら、質問文が編集可能かどうかご確認いただき
DIVタグ付きで問題が発生するコードに編集してください、それを見てこうすればいいよと、この回答を編集しますので。
よろしくお願いします。
重ね重ね、ご教示ありがとうございます。
ご相談方法についても、至らないことばかり申し訳ありません。
ベストアンサーの解除、及び、質問・コードを編集させて頂きました。
ご都合が良い時に、ご教示賜れれば幸いです。
回答2件
0
ベストアンサー
再現可能なコードの提示ありがとうございます。おかげで原因が特定しデバッグが完了しました。
まず先に、デバッグが終わったソースを提示します。
テラテイルの文字数の関係で直した部分のみの提示になります
HTML
1 <script> 2 //任意のタブにURLからリンクするための設定 3 function GethashID (hashIDName){ 4 if(hashIDName){ 5 $('.tab li').find('a').each(function() { 6 var idName = $(this).attr('href'); 7 if(idName == hashIDName){ 8 var parentElm = $(this).parent(); 9 $('.tab li').removeClass("active"); 10 $(parentElm).addClass("active"); 11 //表示させるエリア設定 12 $(".area").removeClass("is-active"); 13 $(hashIDName).addClass("is-active"); 14 } 15 }); 16 } 17 } 18 19 //タブをクリックしたら 20 $('.tab a').on('click', function() { 21 var idName = $(this).attr('href'); 22 GethashID (idName); 23 return false; 24 }); 25 26 // 上記の動きをページが読み込まれたらすぐに動かす 27 $(window).on('load', function () { 28 $('.tab li:first-of-type').addClass("active"); 29 $('.area').first().addClass("is-active"); //変更箇所 30 var hashName = location.hash; 31 GethashID (hashName); 32 }); 33 </script> 34 </body> 35</html>
どうやって直したか
:first-of-typeセレクタは、条件に当てはまる親要素の最初の要素を返します。
したがって親要素が取得できていないと要素を取得できません、取得できなかった要素に一生懸命addClassしても、動かないです。
まず、最初の提示コードで見ていきましょう
ブラウザを開いてページを表示した状態でF12キーを押して開発者ツールを開きます。
コンソールにChromeだと貼り付けを許可とタイプしてエンターを押します
こうしないと、デバッグできません。
addClassしようとしている物の親要素をparent()メソッドで取得して結果の表示の▶をクリックします
結果はlength1で**（ここ重要）**bodyタグが取得できています。
次に、動かないとおっしゃっているコードで同様のことをしてみます。
結果はlength0で親要素の取得に失敗しています。
だからis-activeクラスが付与されず結果表示されないのです。
動かないとおっしゃっているコードのHTML構造では親要素が拾えず、したがって:first-of-typeセレクタで最初の要素が拾えずaddClassに失敗します。
どうしたらいいのでしょう？
解決策は:first-of-typeセレクタを使わず、jQueryのfirst()メソッドを使って最初の要素を取得し、これにaddClassします。
length1でdivタグidがmenber2のものがちゃんと取得できています（最後の結果の▶0の所）
後は、これにaddClassしてやればちゃんと動きます。
これが解決したコードの状態です。最初に表示された後、別タブを開いてリロードしてみてください、ちゃんと最初のタブが開いた状態になります。
以上がデバッグ完了までの流れです。
お役に立てたなら、ベストアンサーと、左の数字をクリックして評価を上げていただければ幸いです。
長文にお付き合いいただきありがとうございました。m(_ _)m
投稿2024/02/16 20:09
総合スコア501
質問投稿の仕方〜デバック（解決）まで非常に丁寧なご指導、ありがとうございました。
当該divタグが入り、同親要素内でタグメニューのdivタグが「最初の要素でなくなっていた」ため、first-of-typeでタグメニューのセレクタが該当せず、addclassできずに、「.on('load'」が機能していなかったということですね。
なので、指定したセレクタ内の最初の要素を該当させるfirst()メソッドで探させる範囲を「親要素内」から「タグメニュー内」に限定する必要があったのですね。
回答ありがとうございます。
試したところ問題が解決しました！
ベストアンサーに選ばせていただきました。
今回のご鞭撻・経験を元にさらに精進させて頂きます。
重ね重ねありがとうございました。
0
与えられた情報が不足していたので、与えられたもののみで提示されたコードをコード補完して試してみました。
情報が不足していたので、HTML5と仮定してコードの補完をしました、コードを提示するときにはこのように提示してください。
以下のコードがそうですが、ちゃんとload時に機能していますよ？
試しに、一回表示して、別タブを選択しリロードすると、ちゃんと最初のタブが開かれた状態になります。
実際に、下のコードを動かしてみてください。
なので、HTML、CSS、JavaScriptの別の部分に問題があると思われます。
質問するときは、提示するコードのみで、うまくいかない現象が再現できるような範囲で提示してください。
でないと、こちらはエスパーではないので、提示されなかった部分のコードに原因があったとしても把握できません。
もしコードが長すぎてTERATAILのコード領域に収めきれなかった場合は、CODEPENというサービスで、そちらにコードを載せてそのリンクを記載してくれればOKです。
あと、細かなことですがjQueryのonを使うなら.readyもonで統一しましょう。コードの一貫性は大事です。
実社会に入ってコーダーになった時、そのコードを一生質問者様がメンテするわけではありません。
他の方が読んでも、スムーズに理解できるよう、記述は統一しましょう。
cssには1行コメントという概念はありません、なので//ではなく、/*一行コメント*/と直してあります
HTML
1<!DOCTYPE html> 2<html lang="jp"> 3 <head> 4 <title>タブメニュー初期表示時オープン</title> 5 <script src="https://kit.fontawesome.com/26c6772bd8.js" crossorigin="anonymous"></script> 6 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script> 7 8 <!-- スライダー --> 9 <script src="js/slick.min.js"></script> 10 <script src="js/slider-omotenashi.js"></script> 11 <script src="js/slider-room.js"></script> 12 13 <!-- スクロールしたら文字色が変わる --> 14 <script src="js/midnight.jquery.js"></script> 15 16 <!-- タブメニュー --> 17 <script src="js/tab-menu.js"></script> 18 19 <!-- ハンバーガーメニュー --> 20 <script> 21 $(function(){ 22 $(".hunberger-btn").on("click",function(){ 23 $(".menu").toggleClass("show") 24 $(".transform1").toggleClass("rotate1") 25 $(".transform2").toggleClass("opacity") 26 $(".transform3").toggleClass("rotate3") 27 }) 28 }) 29 </script> 30 31 <!-- スクロールしたら文字色が変わる --> 32 <script> 33 $(document).on('ready', function() { 34 $('.change-color').midnight(); 35 }); 36 </script> 37 <style> 38 /* ーーータブメニュー ーーーー*/ 39 /*tabの形状*/ 40 .tab{ 41 display: flex; 42 flex-wrap: wrap; 43 font-family: "shinryu", sans-serif; 44 font-weight: 400; 45 font-style: normal; 46 margin-left: 40px; 47 } 48 .tab li a{ 49 display: block; 50 background:#ddd; 51 margin:0 2px; 52 padding:10px 20px; 53 } 54 /*liにactiveクラスがついた時の形状*/ 55 .tab li.active a{ 56 background:#fff; 57 } 58 /*エリアの表示非表示と形状*/ 59 .area { 60 display: none; 61 opacity: 0; 62 background: #fff; 63 margin-left: 40px; 64 padding:50px 20px; 65 font-family: "shinryu", sans-serif; 66 font-weight: 400; 67 font-style: normal; 68 } 69 /*areaにis-activeというクラスがついた時の形状*/ 70 .area.is-active { 71 display: block; 72 animation-name: displayAnime; 73 animation-duration: 2s; 74 animation-fill-mode: forwards; 75 } 76 77 @keyframes displayAnime{ 78 from { 79 opacity: 0; 80 } 81 to { 82 opacity: 1; 83 } 84 } 85 /* ーーータブメニュー終了ーーーーーー*/ 86 </style> 87 </head> 88 <body> 89 <ul class="tab"> 90 <li><a href="#menber2">2名様</a></li> 91 <li><a href="#menber3">3名様</a></li> 92 <li><a href="#menber4">4名様</a></li> 93 <li><a href="#menber5">5名様</a></li> 94 <li><a href="#menber6">6名様</a></li> 95 </ul> 96 <div id="menber2" class="area"> 97 <table> 98 <tr> 99 <th>紅葉</th> 100 <th>水面</th> 101 <th>音色</th> 102 <th>紅葉茶</th> 103 <th>滝の音</th> 104 <th>雪花</th> 105 <th>囲炉裏</th> 106 <th>太平</th> 107 </tr> 108 <tr> 109 <th>38,500円</th> 110 <th>41,800円</th> 111 <th>38,500円</th> 112 <th>33,000円</th> 113 <th>41,800円</th> 114 <th>41,800円</th> 115 <th>36,300円</th> 116 <th>36,300円</th> 117 </tr> 118 </table> 119 </div> 120 <div id="menber3" class="area"> 121 <table> 122 <tr> 123 <th>紅葉</th> 124 <th>水面</th> 125 <th>音色</th> 126 <th>紅葉茶</th> 127 <th>滝の音</th> 128 <th>雪花</th> 129 <th>囲炉裏</th> 130 <th>太平</th> 131 </tr> 132 <tr> 133 <th>36,300円</th> 134 <th>39,300円</th> 135 <th>36,300円</th> 136 <th>30,800円</th> 137 <th>39,600円</th> 138 <th>39,600円</th> 139 <th>34,100円</th> 140 <th>34,100円</th> 141 </tr> 142 </table> 143 </div> 144 <div id="menber4" class="area"> 145 <table> 146 <tr> 147 <th>紅葉</th> 148 <th>水面</th> 149 <th>音色</th> 150 <th>紅葉茶</th> 151 <th>滝の音</th> 152 <th>雪花</th> 153 <th>囲炉裏</th> 154 <th>太平</th> 155 </tr> 156 <tr> 157 <th>34,100円</th> 158 <th>37,400円</th> 159 <th>34,100円</th> 160 <th>28,600円</th> 161 <th>37,400円</th> 162 <th>37,400円</th> 163 <th>31,900円</th> 164 <th>31,900円</th> 165 </tr> 166 </table> 167 </div> 168 <div id="menber5" class="area"> 169 <table> 170 <tr> 171 <th>紅葉</th> 172 <th>水面</th> 173 <th>音色</th> 174 <th>紅葉茶</th> 175 <th>滝の音</th> 176 <th>雪花</th> 177 <th>囲炉裏</th> 178 <th>太平</th> 179 </tr> 180 <tr> 181 <th>31,900円</th> 182 <th>35,200円</th> 183 <th>31,900円</th> 184 <th>-</th> 185 <th>35,200円</th> 186 <th>35,200円</th> 187 <th>-</th> 188 <th>-</th> 189 </tr> 190 </table> 191 </div> 192 <div id="menber6" class="area"> 193 <table> 194 <tr> 195 <th>紅葉</th> 196 <th>水面</th> 197 <th>音色</th> 198 <th>紅葉茶</th> 199 <th>滝の音</th> 200 <th>雪花</th> 201 <th>囲炉裏</th> 202 <th>太平</th> 203 </tr> 204 <tr> 205 <th>-</th> 206 <th>33,000円</th> 207 <th>-</th> 208 <th>-</th> 209 <th>33,000円</th> 210 <th>33,000円</th> 211 <th>-</th> 212 <th>-</th> 213 </tr> 214 </table> 215 </div> 216 <script> 217 //任意のタブにURLからリンクするための設定 218 function GethashID (hashIDName){ 219 if(hashIDName){ 220 $('.tab li').find('a').each(function() { 221 var idName = $(this).attr('href'); 222 if(idName == hashIDName){ 223 var parentElm = $(this).parent(); 224 $('.tab li').removeClass("active"); 225 $(parentElm).addClass("active"); 226 //表示させるエリア設定 227 $(".area").removeClass("is-active"); 228 $(hashIDName).addClass("is-active"); 229 } 230 }); 231 } 232 } 233 234 //タブをクリックしたら 235 $('.tab a').on('click', function() { 236 var idName = $(this).attr('href'); 237 GethashID (idName); 238 return false; 239 }); 240 241 242 // 上記の動きをページが読み込まれたらすぐに動かす 243 $(window).on('load', function () { 244 $('.tab li:first-of-type').addClass("active"); 245 $('.area:first-of-type').addClass("is-active"); 246 var hashName = location.hash; 247 GethashID (hashName); 248 }); 249 </script> 250 </body> 251</html>
投稿2024/02/14 18:02
編集2024/02/14 18:19総合スコア501
nekora様、ご検討・ご鞭撻ありがとうございました。
また、私の質問投稿させて頂いたコードの事前確認不足があり、大変申し訳ありませんでした。
確認頂いた結果に合わせ原因箇所の再検討を行いました。
結果、・・・、申し訳ありません。私が当たりをつけていた「.on(load」には問題無く、・・・・今回提示した「<ul class="tab">の直情にあるdivタグ」部分があると読み込み時にタブメニューが閉じてしまうことが分かりました。
改めて問題のdiv部分を含めた状態で質問投稿させて頂きます。
もしよろしければ、改めてご鞭撻頂ければ幸いです。
ベストアンサーになてしまったんですが、dandelion0626様がご自分で選ばれましたか？
であれば、問題はまだ解決していないのでベストアンサーは選ぶべきではありません、
手動でベストアンサーを解除してください。
質問は編集できるので、そこで、DIVタグ付きでLOAD時にうまくいかないというコードに書き換えていただければ
そのコードを見てここがおかしいですよとアドバイスを書き込めます。
もし、システムが勝手にベストアンサーに選んでしまっているようなら、質問文が編集可能かどうかご確認いただき
DIVタグ付きで問題が発生するコードに編集してください、それを見てこうすればいいよと、この回答を編集しますので。
よろしくお願いします。
あなたの回答
tips
プレビュー
