单击后保持菜单项的onclick处于活动状态

Question

我创建了一个垂直菜单。其中一个项目具有href属性，其他项目具有onclick。我想让每个项目在点击后突出显示。我使用了a:active，但只在点击它们时才突出显示这些项目。

我也使用a:target，但它对我没有帮助。有没有办法用css或javascript完成这个？

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

是的，您可以使用JavaScript和CSS完成此操作。

这是一个示例（使用jQuery库），它在元素上设置一个活动类，并将一些基本样式应用于活动类：

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

comparison

Answer 2

它应该如何以及你想要它....你点击的链接改变了背景颜色然后如果你点击其他链接，前一个链接恢复正常，新链接变为活动...

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