我有一个侧边栏,我希望锚元素(HTML 中的链接 1、2、3)中的文本在单击时更改颜色。此外,我希望一次只有一个彩色锚元素,因此前一个元素应始终恢复为正常颜色。这怎么办?
这是我的 HTML: https://pastebin.com/ew9qXAzH
这些是我的锚元素:
<div class="sidenav">
<button class="dropdown-btn">Dropdown1
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-container">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
<button class="dropdown-btn">Dropdown2
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-container">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
答案 0 :(得分:3)
显然 :focus
仅在您点击页面中的其他内容之前保持“上次点击”颜色。
a:focus { color: green; }
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
答案 1 :(得分:1)
我为所有链接提供了一个名为“myLink”的类和一个 onclick 函数“linkClicked()”。 这是 JavaScript 的样子:
SomeFunction
答案 2 :(得分:1)
有相应的 css 选择器。
a:link and a:visited.
第一个在链接处于正常状态时起作用,第二个在您单击特定链接时起作用,因此您可以像这样>
a:link {
color: red;
}
a:visited {
color: green;
}
您也可以使用 a:active 当您点击链接时立即触发,但一旦点击事件结束,颜色就会恢复正常(换句话说,效果持续 0.01 秒)