javascript - 单击后保持带有 onclick 的菜单项处于事件状态

Question

我创建了一个垂直菜单。其中一项具有 href 属性，其他项具有 onclick。我希望每个元素在被点击后突出显示。我使用了 a:active 但它只会在我单击时突出显示元素。

我也使用了 a:target 但它对我没有帮助。有没有办法使用 css 或 javascript 来完成此操作？

.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">
		  <a href="http://example.com/">Main</a>
		  <a onclick="loadXMLDoc('STATISTICS1.xml')">New Collection</a>
		  <a onclick="loadXMLDoc('STATISTICS2.xml')">Intimate Apparel</a>
		  <a onclick="loadXMLDoc('STATISTICS3.xml')">Beachwear</a>
</div>

Answer 1

这是它应该的样子和你想要的样子......你点击的链接会改变背景颜色，然后如果你点击其他链接，前一个链接会恢复正常并且新链接会激活......

$('.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">
		  <a href="http://example.com/">Main</a>
		  <a onclick="loadXMLDoc('STATISTICS1.xml')" href="#new">New Collection</a>
		  <a onclick="loadXMLDoc('STATISTICS2.xml')" href="#int">Intimate Apparel</a>
		  <a onclick="loadXMLDoc('STATISTICS3.xml')" href="#beach">Beachwear</a>
</div>