jQueryで動くタブ切り替えに、コントローラーをつけるにはどうしたらいいか

Question

前提・実現したいこと

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/ツールのバージョンなど）

Answer 1

.is-activeが付いている要素の、次の要素に対して$( 次の要素 ).trigger( 'click' );すればよいです。

【.trigger() | jQuery API Documentation】
https://api.jquery.com/trigger/

Comments

[退会済みユーザー]

申し訳ありません。
次の要素を指定するにはどのような書き方になるのでしょうか？

[kei344]

書き方を調べるには、「jQuery 次の要素」など単純な語で検索してみてください。