なぜ私の<a>タグの選択が機能していないのですか？

私はこのコードを持っている：なぜ私の<a>タグの選択が機能していないのですか？

<div class="list-group" id="generalView"> 
    <a href="" id="today" onclick="displayData()" class="list-group-item" data-toggle="modal" data-target="#displayDiary"> 
     <h4 class="list-group-item-heading">Today's Diary</h4> 
    </a> 
    <a href="" class="list-group-item"> 
     <h4 class="list-group-item-heading">Last Week's Diaries</h4> 
    </a> 
    <a href="" class="list-group-item"> 
     <h4 class="list-group-item-heading">Last Month's Diaries</h4> 
    </a> 
</div>

$('#generalView > a').click(function(e) { 
    e.preventDefault(); 
    $('#generalView > a').removeClass('active'); 
    $(this).addClass('active'); 
});

私は<a>タグをクリックするが、私の選択が働いていないときに、クラスactiveを追加します。間違って選択していますか？私はすでに、すべての<a>要素に単一のクラスを与えようとしましたが、そのクラスを選択しようとしましたが、うまくいきません。なぜこうなった？

出典

2016-11-12 G. Rocha

次のコードを考えてみます。https： // jsfi ddle.net/ejfxa4jL/。ハンドラ関数に渡されたイベントで 'preventDefault（）'を呼び出す必要があることに注意してください。そうしないと、ページが転送され、状態が失われます。ページ間に状態を保持したい場合は、セレクションをどこかに格納する必要があります。クエリーストリングパラメータ、 'localStorage'、' sessionStorage'、クッキー、サーバサイドセッション、またはデータストアとしてのURLで指定します。 –

私は答えを書くことができるよりも速く質問を編集しています。一点では問題ありませんでした。私が見る限り、セレクタに問題はありませんでした。あなただけの 'addClass'呼び出しの' $（this） 'を'＃generalView'の子である ''タグではなくターゲットにしたいと思っているでしょうか？あなたが確信しているページ - アラートを使う必要はありません:)。これはあまり関連性がないが、編集した場合の謝罪！ – Brian

それはとても妥当な音と私はそれを試みたが、動作しませんでした。内部のコードは機能しません。私も ''タグだけを選択しようとしましたが、うまくいきません。私が 'preventDefault（）'を呼び出すときにも同じように見える –

ここでは、各タグにクラスを使用する単純な解決策があります。それが役に立てば幸い！

$(document).ready(function(){ 
 
    $('#generalView > a').click(function() { 
 
    $('.myClass').removeClass('active'); 
 
    $(this).addClass('active'); 
 
    return false; 
 
}); 
 

 
});

.active { 
 
    color: red; 
 
}

<script type = "text/javascript" 
 
     src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
 
<div class="list-group" id="generalView"> 
 
    <a href="" id="today" onclick="displayData()" class="list-group-item myClass" data-toggle="modal" data-target="#displayDiary"> 
 
     <h4 class="list-group-item-heading">Today's Diary</h4> 
 
    </a> 
 
    <a href="" class="list-group-item myClass"> 
 
     <h4 class="list-group-item-heading">Last Week's Diaries</h4> 
 
    </a> 
 
    <a href="" class="list-group-item myClass"> 
 
     <h4 class="list-group-item-heading">Last Month's Diaries</h4> 
 
    </a> 
 
</div>

出典

2016-11-12 22:14:50 HenryDev

私が私の質問で言ったように、私はすでにそれを試みたが、うまくいきませんでした：/だが感謝 –

@ G.Rocha私は少しだと思いますあなたの質問を混乱させる。リンク1をクリックすると、このリンクは赤色のリンクになるはずです。次に、リンク2をクリックすると、このリンクは赤い色を持つ唯一のものでなければなりません。それはあなたが欲しいものですか？それは私のコードが行うものなので – HenryDev

はい。私はそれをしたい。問題は選択が機能していないので、すべてのjavascriptコードが実行されていないことです。だから私は選択が機能していない理由を知りたい。 –

それはJS

せずに行うことができますあなたのコードが正常に動作するよう、あなたの状況

a:active { 
 
    color: orange; 
 
}

<script type = "text/javascript" 
 
     src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
 
<div class="list-group" id="generalView"> 
 
    <a href="" id="today" class="list-group-item myClass" data-toggle="modal" data-target="#displayDiary"> 
 
     <h4 class="list-group-item-heading">Today's Diary</h4> 
 
    </a> 
 
    <a href="" class="list-group-item myClass"> 
 
     <h4 class="list-group-item-heading">Last Week's Diaries</h4> 
 
    </a> 
 
    <a href="" class="list-group-item myClass"> 
 
     <h4 class="list-group-item-heading">Last Month's Diaries</h4> 
 
    </a> 
 
</div>

出典

2016-11-12 23:09:00

なぜ私の<a>タグの選択が機能していないのですか？

答えて

関連する問題