jQueryで同名称のクラスを一括処理したい

Question

前提・実現したいこと

ホームページ制作を行っており、ページ内リンクをクリックした時に下線を引くような処理を行いたいです。

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

ページリンクをクリックすると下線を表示することはできるのですが、クラスでの指定を行うとクリック時にメニューの全てのリンクの下線を削除することができない理由を知りたいです

該当のソースコード

<header class="header">
        <div class="header__inner inner">
            <h1 class="header-logo"><a href="/"><img src="img/logo.png" alt=""></a></h1>
            <ul class="header__nav">
                <li><a href="#card" class="select__line">Card</a></li>
                <li><a href="#news" class="select__line">News</a></li>
                <li><a href="#price" class="select__line">Price</a></li>
                <li><a href="#access" class="select__line">Access</a></li>
                <li><a href="#contact" class="select__line">Contact</a></li>
            </ul>
        </div>
    </header>

 li {
        &:not(:first-child){
        margin-left: 40px;
    }
        a {
            color: #fff;
            text-decoration: none;
            position: relative;
            
            &::after {
                content:"";
                width:100%;
                position: absolute;
                bottom: -10px;
                height: 2px;
                left: 0px;
                background: transparent;
                transition: all 0.3s ease 0s;
            }

            &:hover,
            &.is-active {
                
                &::after {
                    background: tomato;
                }
                
            }
           
    }
}
}

$('.select__line').on('click', function() {
  $('.select__line').removeClass('is-active');
  $(this).addClass('is-active');
  return false;
});

試したこと

$('.header__nav li a').on('click', function() {
  $('.header__nav li a').removeClass('is-active');
  $(this).addClass('is-active');
  return false;
});

クラスを指定せずに階層指定にすると正常に動作します。

Comments

[退会済みユーザー]

質問のコードは、「あるa.select__line をクリックすると、いったんすべての a.select__line からis-activeクラスは削除されて、あらためてクリックしたa.select__lineにのみis-activeクラスが付加される」というものにはなっていると思うんやが、それと下線の有り無しがどう関わるのかがよう分からん。ゆうて、たぶん CSS も載せとく必要があると思いますわ。

[ametori]

すみません。記載を忘れておりました。追記したのでよろしければご確認くださいmm

[退会済みユーザー]

追記乙ですー。で、CodePenに質問のコード転記して、スタイルは全体くくる
body {
　background-color: #444;
}　
を追加してみたんやが、いちおうソレっぽく動いてんで？ ➡ https://codepen.io/i8086x/pen/jOwBOXV

[ametori]

返信ありがとうございます！
たしかに正常に動いてますね。。。
もしかしたらブラウザのキャッシュが悪さしていたのかもしれません。
ともあれ解決できてよかったです。ご回答ありがとうございした！

Answer 1

.select__line:not(.is-active){text-decoration:none;}