前提・実現したいこと
jqueryで動くタブを実現したくて、
https://blog-and-destroy.com/7389
こちらのサイト様からコードをお借りしました。
このタブが、更にnext/prevボタンで
前後に切り替わるようにしたいと思っています。
それは可能なのでしょうか?
可能だとしたら教えて頂きたいです。
発生している問題・エラーメッセージ
該当のソースコード
css javascript jQuery <!--タブ--> <ul class="tab-group"> <li class="tab is-active">Tab-A</li> <li class="tab">Tab-B</li> <li class="tab">Tab-C</li> </ul> <!--タブを切り替えて表示するコンテンツ--> <div class="panel-group"> <div class="panel is-show">Content-A</div> <div class="panel">Content-B</div> <div class="panel">Content-C</div> </div> .panel{ display:none; } .tab.is-active{ background:#F00; color:#FFF; transition: all 0.2s ease-out; } .panel.is-show{ display:block; } jQuery(function($){ $('.tab').click(function(){ $('.is-active').removeClass('is-active'); $(this).addClass('is-active'); $('.is-show').removeClass('is-show'); const index = $(this).index(); $('.panel').eq(index).addClass('is-show'); }); });
試したこと
.panel-groupの中に
<a class="prev">prev画像</a>
<a class="next">next画像</a>
を入れました。
jqueryは
$('a.prev').on('click',function(){
})
$('a.next').on('click',function(){
})
色々と調べたのですが、ここに何を入れて良いか見当がつきません。
補足情報(FW/ツールのバージョンなど)
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2020/01/03 09:27
2020/01/03 12:05