クリックしたときの背景と文字の色を変えるようにしたい

Question

クリックしたときに背景と文字の色を変えるようにしたいです

やり方は色々調べてaddClassを使えばいいということ、試してみると最初はうまくいくのですが何回かクリックすると一瞬色が変わるだで元の色に戻ってしまいます
クリックしても変わらなくなるとき上のタイトルに一瞬数字の並びがでます。
今まではこのようなクリックしたとき色を変えることは何回もやっているのですが今回急にできなくなりました

該当のソースコード

<div class="article">
      <ul class="article-bar">
          <li class="bar-title active"><a href=""><i class="fas fa-rocket"></i>新着記事</a></li>
          <li class="bar-title"><a href=""><i class="fa fa-bookmark"></i>おすすめ記事</a></li>
      </ul>
</div>

.bar-title{
     width: 50%;
     color: #a7a7a7;
     background-color: #ffffff;
     padding: 10px 0;

     i{
        margin-right: 3px;
        color: #a7a7a7;
      }

     a{
       display: block;
       color: #a7a7a7;
     }
}

.active{
    background: linear-gradient(95deg, #75d5ff, #e68eff);
                    
    a{
        color:#ffffff;
     }
    
    i{
       color:#ffffff;
     }
}   

¥$(function(){
    // 記事のバーの部分
    $('.bar-title').click(function(){
        $('.bar-title').removeClass('active');
        $(this).addClass('active');
    });
        
});

試したこと

何かのバグではないかと思い「javascript バグ」のように調べたのですが答えとなる物は出てきませんでした

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

ここにより詳細な情報を記載してください。

Comments

[yukkuri]

Javaタグが付いていますが、JavaScriptのタグがあるはずです。
Javaのタグを削除して、JavaScriptのタグにしてください。

Answer 1

<a href="">を
<a href="javascript:void(0)">に
変更してみるといかがでしょうか?

<div class="article">
  <ul class="article-bar">
    <li class="bar-title active"><a href="javascript:void(0)"><i class="fas fa-rocket"></i>新着記事</a></li>
    <li class="bar-title"><a href="javascript:void(0)"><i class="fa fa-bookmark"></i>おすすめ記事</a></li>
  </ul>
</div>