タブの切り替えがうまくいきません

Question

タブの切り替えに対応して、中身のコンテンツを切り替えたい

タブの切り替えがうまくいきません。

・スタイル切り替えの仕組み
current→アクティブなタブのスタイル
tabShow→アクティブなタブの中身のスタイル
上のクラスをつけ外す形で切り替えを行う。

・タブとタブの中身のコンテンツ切り替えを対応させる仕組み
選択したタブのクラス名を取得して引数に格納。
その因数をidに代入して呼応させる。

発生している問題・エラーメッセージ
タブの中身のクラスの切り替えがうまくいかない

該当のソースコード

				$(function() {
					$('ul.tab_controls li').click(function() {
						var index = $(this).attr("class");
						$('ul.tab_controls li').removeClass('current');
						$(this).addClass('current');
						$('article').removeClass('tabShow');
						$("#index").addClass('tabShow');
					});
				});

<ul class="tab_controls grid_tab__5">
　<li class="tab1_1 current"><img class="icon desvg" src="img/i_B_earthcick.svg" alt="">タブ</li>
　<li class="tab1_2"><img class="icon desvg" src="img/i_B_rain.svg" alt="">タブ</li>
　<li class="tab1_3"><img class="icon desvg" src="img/i_B_fire.svg" alt="">タブ</li>
</ul>
<!-- /tab_controls -->
<div class="tab_content">
　<article id="tab1_1" class="tabShow">
　　<div class="grid_article">
　　 <a class="feature" href="">							
　　　<div></div>									
　　　<h1>タブの中身<span>日付</span></h1>						
　 　</a>	
   </div>																					
 </article>
 <!-- /#tab1_1 -->
　<article id="tab1_1" class="tabShow">
　　<div class="grid_article">
　　 <a class="feature" href="">							
　　　<div></div>									
　　　<h1>タブの中身<span>日付</span></h1>						
　 　</a>	
   </div>																					
 </article>
 <!-- /#tab1_2 -->
　<article id="tab1_1" class="tabShow">
　　<div class="grid_article">
　　 <a class="feature" href="">							
　　　<div></div>									
　　　<h1>タブの中身<span>日付</span></h1>						
　 　</a>	
   </div>																					
 </article>
 <!-- /#tab1_3 -->
</div>
<!-- /tab_content -->

ご教授いただければ幸いです。。
因数の書き方や代入のやり方に問題があるのでしょうか。涙

Answer 1

$( "#" + index ).addClass('tabShow');