複数のメニューバーにカレント表示させたい

Question

前提・実現したいこと

タブメニューのメニュバーを三カ所に表示させています。メニューアイコンをクリックしたときに同時に押下したものと同じアイコンに色を付けたいのですが、できません。何が違うのかご教示ください。

発生している問題・エラーメッセージ

なし

該当のソースコード

// caption tab
$(".caption nav ul li").on('click', function () {
    $('.caption nav ul li').removeClass("ac");
    $(this).addClass("ac");
    var id=$(this).attr('class').split(" ")[0]; // 初めのclass取得
    $('.caption--wrp > div').removeClass('ac').fadeOut(450);
    $('.'+id+'_cnt').addClass('ac').fadeIn(450);
 })

<link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css" media="print" onload="this.media='all'">

//

<div class="caption">
  <nav>
    <ul>
      <li class="tab1 ac"><span class="lnr lnr-pencil"></span>info</li>
      <li class="tab2"><span class="lnr lnr-file-empty"></span>pages</li>
      <li class="tab3"><span class="lnr lnr-cog"></span>set</li>
      <li class="tab4"><span class="lnr lnr-download"></span>code</li>
      <li class="tab5"><span class="lnr lnr-bookmark"></span>bkm</li>
    </ul>
 </nav>
 <div class="caption--wrp id="caption">
   <div class="tab1_cont ac">
　　　　あああ
   </div>
   <div class="tab2_cont">
　　　　いいい
   </div>
   <div class="tab3_cont">
　　　　ううう
   </div>
   <div class="tab4_cont">
　　　　えええ
   </div>
   <div class="tab5_cont">
　　　　おおお
   </div>
 </div>
 <nav>
    <ul>
      <li class="tab1 ac"><span class="lnr lnr-pencil"></span>info</li>
      <li class="tab2"><span class="lnr lnr-file-empty"></span>pages</li>
      <li class="tab3"><span class="lnr lnr-cog"></span>set</li>
      <li class="tab4"><span class="lnr lnr-download"></span>code</li>
      <li class="tab5"><span class="lnr lnr-bookmark"></span>bkm</li>
    </ul>
 </nav>
</div>

/* caption wapper */
.caption--wrp > div {
    display: none;
    margin: 4rem 0;
    width: 100%;
}
.caption--wrp div.ac {
    display: block;
}
.caption nav ul li span {
    font-size: 3rem;
    cursor: pointer;
}
.caption nav ul li {
    text-align: center;
    text-transform: uppercase;
}
.caption nav ul li a {
    border: none;
    color: red;
}
.caption nav ul li span {
    font-size: 2rem;
}
.caption nav ul li.ac span, .caption nav ul li.ac {
    color: darkblue;
}
.caption nav ul li span {
    display: block;
}

試したこと

var n = document.querySelector('#caption > div')
if( n.className == 'ac' ) {
    var e = n.classList.item(1),
        a = e.replace( /_cnt/g , '' ) ;
    
    $('.'+a).addClass('ac');
}

同時にclass="ac"をつけたいのですができませんでした。

補足情報（FW/ツールのバージョンなど）

Chrome最新版、Safari604.1

Answer 1

var id=$(this).attr('class').split(" ")[0]; // 初めのclass取得
    $('.'+id).addClass('ac');

でできました。