Warum meine <a> Tag-Auswahl nicht funktioniert?

Ich habe diesen Code:Warum meine <a> Tag-Auswahl nicht funktioniert?

<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'); 
});

Ich mag active eine Klasse hinzuzufügen, wenn ein <a> Tag angeklickt wird, aber meine Auswahl funktioniert nicht. Wähle ich falsch? Ich habe bereits versucht, jedem Element eine <a> -Elemente zu geben und dann zu versuchen, diese Klasse auszuwählen, funktioniert aber nicht so gut. Warum passiert dies?

Quelle

2016-11-12 G. Rocha

Ihr Code scheint

betrachten folgenden Code ohne js getan werden, um gut zu funktionieren: https: // jsfi ddle.net/ejfxa4jL/. Beachten Sie, dass Sie 'preventDefault()' für das Ereignis aufrufen müssen, das an die Handler-Funktion übergeben wird. Andernfalls wird die Seite übertragen und der Status geht verloren. Wenn Sie den Status zwischen Seiten beibehalten möchten, müssen Sie die Auswahl irgendwo speichern, z. in der URL als Querystring-Parameter, 'localStorage',' sessionStorage', ein Cookie, die serverseitige Sitzung oder in einem Datenspeicher. –

Sie bearbeiten die Frage schneller als ich eine Antwort schreiben kann - an einem Punkt war es in Ordnung - es gab kein Problem mit Ihren Selektoren, soweit ich sehen konnte. Das einzige Problem ist, dass Sie wahrscheinlich '$ (this)' für Ihren 'addClass' Aufruf nicht jedes' 'Tag, das ein Kind von' # generalView' ist, tarieren möchten. Wenn Sie jemals Zweifel daran haben, testen Sie sie einfach in der Konsole auf der Seite, über die Sie sich nicht sicher sind - keine Notwendigkeit, Benachrichtigungen zu verwenden :). Entschuldigung, wenn das jetzt weniger relevant ist, aber die Änderungen! – Brian

Das klingt so vernünftig und ich habe das versucht, aber nicht funktioniert. Der Code im Inneren funktioniert nicht. Ich habe sogar versucht, nur die '' Tags auszuwählen und funktioniert auch nicht so gut. Sieht so aus, als wenn ich 'preventDefault() 'aufrufen würde, der Code funktioniert einfach nicht –

Hier ist eine einfache Lösung mit einer Klasse auf jedem Tag. Ich hoffe es hilft!

$(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>

Quelle

2016-11-12 22:14:50 HenryDev

Wie ich in meiner Frage gesagt habe, habe ich das schon versucht und nicht funktioniert:/aber danke –

@ G.Rocha Ich denke, ich bin ein wenig verwirrt über Ihre Frage. Also sagen wir, Sie klicken auf Link 1, dann sollte dieser Link der einzige Link mit roter Farbe sein. Dann, wenn Sie auf Link 2 klicken, dann sollte dieser Link der einzige mit roter Farbe und so weiter sein ... Ist das, was Sie wollen? weil das ist, was mein Code tut – HenryDev

Ja. Ich möchte das tun. Das Problem ist, dass die Auswahl nicht funktioniert, also läuft mein JavaScript-Code nicht. Ich möchte also wissen, warum die Auswahl nicht funktioniert. –

Es kann für Ihre Situation

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>

Quelle

2016-11-12 23:09:00

Warum meine <a> Tag-Auswahl nicht funktioniert?

Antwort

Verwandte Themen