單擊后保持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

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

這是一個示例（使用jQuery庫），該示例在元素上設置了一個活動類，並對該活動類應用了一些基本樣式：

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

現場例子

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>