单击后，请与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>

Answer 2

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

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

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

实时示例