javascriptでクラスの付け替えの方法

Question

javascriptでボタンを押すと .-active が2番目の li から外れて1番目の li につくようにしたいです。

<ul class="tab">
 <li class="itemTab"><a>登記情報</a></li>
 <li class="itemTab -active"><a>株主情報</a></li>
</ul>

var classChange = function(){
 var target = document.getElementsByClassName('itemTab');
 for(var i = 0; i < target.length; ++i) {
  target[i].classList.remove('-active');
  target[0].classList.add('-active');
 }
}

上記のコードを書いてみたんですが、
target[0] の部分target[1] にすると1番目の li から2番目の li には付き変わるのですが、2番目から1番目がどうしても動きません。
ご教示のほど、よろしくお願い致しましす。

Answer 1

２つの付け替えならこんな感じで十分

<style>
.-active{color:red}
</style>
<script>
$(function(){
  $('#btn').on('click',function(){
    $('.itemTab').toggleClass('-active');
  });
});
</script>
<ul class="tab">
 <li class="itemTab"><a>登記情報</a></li>
 <li class="itemTab -active"><a>株主情報</a></li>
</ul>
<input type="button" id="btn" value="btn">

３つ以上で回していく場合は一工夫

<style>
.-active{color:red}
</style>
<script>
$(function(){
  $('#btn').on('click',function(){
    ((n=$('.itemTab.-active').next('.itemTab')).length>0?n:$('.itemTab:first')).addClass('-active').siblings().removeClass('-active');
  });
});
</script>
<ul class="tab">
 <li class="itemTab"><a>1</a></li>
 <li class="itemTab -active"><a>2</a></li>
 <li class="itemTab"><a>3</a></li>
 <li class="itemTab"><a>4</a></li>
 <li class="itemTab"><a>5</a></li>
</ul>
<input type="button" id="btn" value="btn">

Answer 2

すみません、他の要素が影響しておりました。
無事に解決致しました！

Comments

[x_x]

結果には影響しませんが
target[0].classList.add('-active');
がループ内にあるのは無駄なので、後ろにもっていったほうがいいかと思います。

[TatsuyaOkawa]

なるほど、そういうことが全くわかっていないので、教えていただいてとてもありがたいです！！
コード修正させていただきます。