Q&A
現在、ペライチのwebサイトを構築しています。
その中にタブ切り替えを行うセクションがあり、そこをフッターからの要素にも対応したかったのですが、どう弄っていいか分かりません。
フッターのリンクをクリックするとスムーズスクロールが発生しタブが押した要素に対応したものに切り替わるようにしたいです。
HTML・jqueryはこうなっております。見やすくするため、インデントはbodyを考慮していません。
<body> <h2 id="2">見出しテキスト</h2> <!--クラスflexは横並びのためです。--> <div class="flex circle"> <a class="paper-raise" href="javascript:void(0);"><img src="*" alt="*">サンプルA</a> <div class="swith" style="display: block"> <img src="*" alt="*"> <h3>サンプルA</h3> <p>サンプルテキスト、上記のpaper-raiseの付与されたaタグをクリックするとこの文章がfadeInによって表示されます。この部分をfotterからのクリックに対応したいです。</p> <a>詳細</a> </div> <a class="paper-raise" href="javascript:void(0);"><img src="*" alt="*">サンプルB</a> <div class="swith" style="display: block"> <img src="*" alt="*"> <h3>サンプルB</h3> <p>サンプルテキスト、上記のpaper-raiseの付与されたaタグをクリックするとこの文章がfadeInによって表示されます。この部分をfotterからのクリックに対応したいです。</p> <a>詳細</a> </div> <a class="paper-raise" href="javascript:void(0);"><img src="*" alt="*">サンプルC</a> <div class="swith" style="display: block"> <img src="*" alt="*"> <h3>サンプルC</h3> <p>サンプルテキスト、上記のpaper-raiseの付与されたaタグをクリックするとこの文章がfadeInによって表示されます。この部分をfotterからのクリックに対応したいです。</p> <a>詳細</a> </div> </div> <footer> <p>フッタータイトル</p> <ul> <li><a href="#2">サンプルA</a></li> <li><a href="#2">サンプルB</a></li> <li><a href="#2">サンプルC</a></li> </ul> </footer> <!--ここからスクリプト--> <script> $(function(){ var rwdTab = $('.circle'), switchPoint = 640, fadeSpeed = 500, slideSpeed = 500; var btnElm = rwdTab.children('.paper-raise'), contentsArea = rwdTab.children('.swith'); //クリックされた要素にクラスbtnAcvが付いていなければ他のbtnAcbを削除し新たに付け加える btnElm.on('click', function(){ if(!$(this).hasClass('btnAcv')){ btnElm.removeClass('btnAcv'); $(this).addClass('btnAcv'); } //ここではビューポイントが横640px以下だった場合にスマホ用の動きへ切り替える、上がPC、下がSP //行われているのはbtnAcvが付与された次の要素、クラスswithをfadeOutスマホではslidDownで表示するというもの if(window.innerWidth > switchPoint){ contentsArea.fadeOut('normal'); $(this).next().fadeIn('normal'); } else { contentsArea.slideUp('normal'); $(this).next().slideDown('normal'); } }); }); </script> </body>
参考にさせていただいたサイトはこちらです。
http://black-flag.net/jquery/20151215-5858.html
恐らくタブの要素とfooterのリストにそれぞれIDを振りswith構文などで「サンプルAが押された、サンプルAにbtnAcvを付与」といった形でそれぞれ処理するのではと考えたのですがどこに記述すればいいか分からず挫折してしまいました。
どんな処理をすればいいか教えて頂けると幸いです。
よろしくお願いします。
回答1件
0
ベストアンサー
特にどれかを指しているわけではないようなので、インデックスで。
JavaScript
1 $('footer a').on('click', function(event) { 2 btnElm.eq($('footer a').index(this)).trigger('click'); 3 });
投稿2018/08/08 06:18
総合スコア13749
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/08/09 21:45