画像を使ったタブの切替、タブ画像のONOFF

###前提・実現したいこと
画像を使ったタブでコンテンツの切り替えをしたいです。
タブのONOFFに合わせてタブ画像も切り替えたいです。

###発生している問題・エラーメッセージ
タブの機能自体は出来たのですが、それに合わせて画像のONOFFも切り替えたいのですが、画像の呼び出しがうまくいかないです。
###該当のソースコード

HTML
1  <ul class="tab">
2     <li class="active"><img src="/img/0/menu1-active.png"/></li>
3     <li class="inactive"><img src="/img/1/menu2-inactive.png"/></li>
4  </ul>
5  <div class="content">
6     <div>tab1の中身</div>
7     <div class="hide">tab2の中身</div>
8  </div>

css
1.hide{display:none;}

javascript
1$(function() {
2  $('.tab li').on("click",function() {
3    var index = $('.tab li').index(this);
4    $('.content div').css('display','none');
5    $('.content div').eq(index).css('display','block');
6    $('.tab li').removeClass('active');
7    $('.tab li').removeClass('inactive');
8    $(this).addClass('active');
9    $('.tab li').not('.active').addClass('inactive');
10    var ChangeInactiveImgSrc = "/img/" + index + "/inactive.png";
11    var ChangeActiveImgSrc = "/img/" + index + "/active.png";
12   $('.active img').attr("src",ChangeActiveImgSrc);
13   $('.inactive img').attr("src",ChangeInactiveImgSrc);
14  });
15});

行動規範の内容に同意します

回答1件

自己解決

こんな感じのjQueryにすることで解決できました。

javascript
1$(function() {
2  /*クリックしたときのファンクションをまとめて指定*/
3  $('.tab li').on("click",function() {
4
5    /*.index()を使いクリックされたタブが何番目かを調べ、*/
6    /* indexという変数に代入します。*/
7    var index = $('.tab li').index(this);
8
9    /*コンテンツを一度すべて非表示にし、*/
10    $('.content div').css('display','none');
11
12    /*クリックされたタブと同じ順番のコンテンツを表示します。*/
13    $('.content div').eq(index).css('display','block');
14
15    /*一度タブについているクラスを消し、*/
16    $('.tab li').removeClass('active');
17    $('.tab li').removeClass('inactive');
18
19    /*クリックされたタブのみにクラスactiveをつけます。*/
20    $(this).addClass('active');
21
22    /*それ以外のタブにクラスinactiveをつけます。*/
23    $('.tab li').not('.active').addClass('inactive');
24    
25    /*起動しているタブがactive,起動していないタブがstack */
26    var ChangeActive = $('.active img').attr('src').replace('stack.png' , 'active.png');
27    var ChangeInactive = $('.inactive img').attr('src').replace('active.png' , 'stack.png');
28
29    /*画像を変更します*/
30    $('.active img').attr("src",ChangeActive);
31    $('.inactive img').attr("src",ChangeInactive);
32  });
33});