Halten Sie Menüpunkte mit onclick aktiv nach dem Klick

Question

Ich habe ein vertikales Menü erstellt. Einer der Artikel hat href Attribut und die anderen haben onclick. Ich möchte, dass jedes Element nach dem Klicken hervorgehoben wird. Ich habe a:active benutzt, aber es hebt nur die Einzelteile hervor, während ich sie anklicke.

Ich habe auch a:target verwendet, aber es hat mir nicht geholfen. Gibt es eine Möglichkeit, dies mit CSS oder Javascript zu erreichen?

.vertical-menu { 
 
    width: 200px; 
 
} 
 

 
.vertical-menu a { 
 
    background-color: #eee; 
 
    color: black; 
 
    display: block; 
 
    padding: 12px; 
 
    text-decoration: none; 
 
} 
 

 
.vertical-menu a:hover { 
 
    background-color: #ccc; 
 
} 
 

 
.vertical-menu a:active { 
 
    background-color: #FF8F2B; 
 
} 
 

 
.vertical-menu a:target { 
 
    background-color: #FF8F2B; 
 
}

<div class="vertical-menu"> 
 
\t \t <a href="http://example.com/">Main</a> 
 
\t \t <a onclick="loadXMLDoc('STATISTICS1.xml')">New Collection</a> 
 
\t \t <a onclick="loadXMLDoc('STATISTICS2.xml')">Intimate Apparel</a> 
 
\t \t <a onclick="loadXMLDoc('STATISTICS3.xml')">Beachwear</a> 
 
</div>

Answer 1

Diese, wie es sein sollte und Wie Sie es wünschen .... Der Link, den Sie anklicken, wird Hintergrundfarbe geändert und dann, wenn Sie anderen Link klicken, wird der vorherige Link wieder normal und neuer Link wird aktiv ...

$('.vertical-menu a').on('click', function() { 
 
$('.vertical-menu a').removeClass('active'); 
 
    $(this).addClass('active'); 
 
}); 
 

 
function loadXMLDoc(x){ 
 

 
}

.vertical-menu { 
 
    width: 200px; 
 
} 
 

 
.vertical-menu a { 
 
    background-color: #eee; 
 
    color: black; 
 
    display: block; 
 
    padding: 12px; 
 
    text-decoration: none; 
 
} 
 

 
.vertical-menu a:hover { 
 
    background-color: #ccc; 
 
} 
 

 
.vertical-menu .active { 
 
    background-color: #FF8F2B; 
 
} 
 

 
.vertical-menu a:target { 
 
    background-color: #FF8F2B; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="vertical-menu"> 
 
\t \t <a href="http://example.com/">Main</a> 
 
\t \t <a onclick="loadXMLDoc('STATISTICS1.xml')" href="#new">New Collection</a> 
 
\t \t <a onclick="loadXMLDoc('STATISTICS2.xml')" href="#int">Intimate Apparel</a> 
 
\t \t <a onclick="loadXMLDoc('STATISTICS3.xml')" href="#beach">Beachwear</a> 
 
</div>

Answer 2

Ja, erreichen Sie diese mit Hilfe von JavaScript und CSS.

Hier ist ein Beispiel (mit der jQuery-Bibliothek), die eine aktive Klasse auf dem Element setzt und hat einige grundlegende auf die aktive Klasse angewendet Styling:

$('.vertical-menu a').on('click', function() { 
    $(this).addClass('active'); 
}); 

Live example