Javascript 纯CSS的方式使按钮有2点击状态

那么很简单,

我想为一堆子菜单项使用一些css动画类，并想知道是否可以以某种方式使用css来允许单击活动状态和取消活动状态。这样，我就可以在菜单项中使用一些有趣的类

这是一个href标记的示例，它指向下面发布的div id概述。我在某种程度上使用jquery，但如果可能的话，我想为菜单项制作一些纯css的东西

 <a class='slide' href='#' data-url='who-are.html' data-target='mission'>
        <span class='element'>Mission and Values</span>
      </a>


    <div id ="overview" class="animated bounceInUp">some content</div>

一些内容

---

所以点击href调出div类。。。如果单击了不同的菜单项，我想向其中添加一个类，它的功能基本相同

HTML:

---

答案很简单，真的

只需使用css焦点就可以允许按钮处于两种状态！乙二醇

button {
    color: red;
}

button:focus {
    color: blue;
}

---

我想知道答案，但那实际上是两个按钮，不是一个。对不起，我起初不明白这个问题，但我已经解决了

#status {
    display: none;
}
label {
    background-color: magenta;
    display: inline-block;
}
.button > button {
    pointer-events: none;
    padding: 8px;
    -webkit-user-select: none;
    user-select: none;
}

#status:not(:checked) ~ .button > button {
    background-color: red;
}
#status:checked ~ .button > button {
    background-color: green;
}

button {
    color: red;
}

button:focus {
    color: blue;
}