Javascript 如何让css按钮在被点击后保持活动状态？

我试图制作一个导航栏，一旦用户点击图像，图像就会保持活动状态。在下面的示例中，单击后叶将保持绿色。下面是我所说的一些代码：

<a class="myButtonLink" href="#LinkURL">Leaf</a>

<style>
 .myButtonLink {
    display: block;
    width: 100px;
    height: 100px;
    background: url('http://kyleschaeffer.com/wordpress/wp-content/uploads/2009/01/buttonleafhover.png') bottom;
    text-indent: -99999px;
 }
 .myButtonLink:hover {
    background-position: 0 0;
 }
</style>

.myButtonLink{
显示：块；
宽度：100px；
高度：100px；
背景：url（'http://kyleschaeffer.com/wordpress/wp-content/uploads/2009/01/buttonleafhover.png“）底部；
文本缩进：-9999px；
}
.myButtonLink:悬停{
背景位置：0；
}

单击即可将类应用于它

$('.myButtonLink').click(function() {
    $(this).toggleClass('active');
});

此代码还有一个附加效果，即在第二次单击时取消选择叶。根据您的需求，您可能想要或不想要它

---

示例：

您可以在单击时对其应用类

$('.myButtonLink').click(function() {
    $(this).toggleClass('active');
});

此代码还有一个附加效果，即在第二次单击时取消选择叶。根据您的需求，您可能想要或不想要它

示例：