JavaScript addClass　効かない

前提・実現したいこと

aタグをクリックするとテキストに色がつくようにしたい。
（aタグにactiveクラスを付与したい）

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

要素をクリックしてもactiveクラスが付与されない。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <link rel="stylesheet" href="style.css">
7    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
8    <script src="javasctipt.js"></script>
9    <title>Document</title>
10</head>
11<body>
12<header></header> 
13<main>
14    <div class="menu">
15        <ul class="list">
16            <li class="item"><a class="btn" href=""><p class="txt">テキスト</p></a></li>
17            <li class="item"><a class="btn" href=""><p class="txt">テキスト</p></a></li>
18            <li class="item"><a class="btn" href=""><p class="txt">テキスト</p></a></li>
19            <li class="item"><a class="btn" href=""><p class="txt">テキスト</p></a></li>
20        </ul>
21    </div>
22</main>
23<footer></footer>
24</body>
25</html>

CSS
1* {
2    margin: 0;
3    padding: 0;
4    box-sizing: border-box;
5}
6
7.menu {
8    width: 100%;
9    height: auto;
10    padding-top: 100px;
11}
12
13.list {
14    color: #282828;
15    list-style: none;
16    text-align: center;
17}
18
19.item {
20    display: inline-block;
21    margin: 0 20px;
22}
23
24.txt {
25    font-size: 1.6rem;
26}
27
28.btn {
29    color: #282828;
30    text-decoration: none;
31}
32
33.active {
34    color: green;
35}

Javascript
1'use strict';
2
3
4jQuery(function($) {
5    $(function () {
6        $(".btn").on("click", function () {
7            $(this).addClass("active");              
8        });
9    });
10});

試したこと

$(".btn")の部分を他のクラス名（itemやtxt）にする。
→効果なし

btnクラスでテキストに色をつけ、remoneClassでクラスを削除することによりテキストの色を変更させる。
→addClassと同じようにクリック時の一瞬のみテキストの色が変化。

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

クリック時の一瞬のみクラスが付与されるかと思いますが、
クリック後、常に付与されるようにしたいです。

初心者の拙い質問ではありますが、どなたかご教授いただけたら幸いです。

行動規範の内容に同意します

回答2件

ベストアンサー

クリック時の一瞬のみクラスが付与されるかと思いますが、

クリック後、常に付与されるようにしたいです。

<a href="">となっていますので、JavaScriptを実行した後に""へページ遷移、つまりリロードしてしまいます。

いちばん手軽には、<a href="javascript:void(0)">として<a>のページ遷移機能を殺しておきましょう。

投稿2020/08/11 00:41

編集2020/08/11 00:45

maisumakun

総合スコア145184

shuto0901

2020/08/11 00:49

クラスが付与されてもページ遷移により、打ち消されるということですね！理解できました。ご教授頂きありがとうございます。

行動規範の内容に同意します

クリックで遷移後、同ページに再遷移ないし、他ページにおいての同リンクの色を変えたいとの解釈で回答いたします。
CSSだけでやれます。
なのでむしろCSSのみでやるべきかと。
（CSSでできることをわざわざJSでやるべきでなく、ページ遷移時後にも認識させれる）

css
1/* クリック直後のアクティブ時に適用 */
2a:active {
3  color: green;
4}
5
6/* 未訪問のリンクに対して適用 */
7a:link {
8  color: blue;
9}
10
11/* 既訪問のリンクに対して適用 */
12a:visited {
13  color: red;
14}
15
16/* オンマウス時に適用 */
17a:hover {
18  color: orange;
19}