我的网页有一个 Bootstrap dropdown button我给了四个下拉元素。他们每个人都被赋予了一个 javascript 事件，该事件允许动态翻译页面的某些元素(因此四个下拉项被命名为“en”、“es”、“fr”、“it”):
<div class="btn-group">
<button id="translate" type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
<i class="fas fa-language"></i>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#lang-en" onclick="window.lang.change('it');return false;">It</a>
<a class="dropdown-item" href="#lang-en" onclick="window.lang.change('fr');return false;">Fr</a>
<a class="dropdown-item" href="#lang-en" onclick="window.lang.change('en');return false;">En</a>
<a class="dropdown-item" href="#lang-en" onclick="window.lang.change('es');return false;">Es</a>
</div>
</div>
我想在选择一种语言时更改四个下拉项的样式。例如，当用户点击“fr”下拉项时，页面的元素被翻译成法语；当她/他再次打开下拉菜单时，元素“fr”被赋予蓝色。
这是我正在尝试做的一个例子:
我希望该下拉项的颜色在页面语言为“法语”的整个过程中保持蓝色。
我一直在尝试使用 CSS 伪类 :active 来实现这个目标，但没有成功:
.dropdown-item:active{
background-color: black;
color: blue;
}
更具体地说，仅当单击该元素时背景颜色才会转换为“黑色”，而我希望它保持黑色直到选择另一种语言。
我是不是使用了错误的伪类，还是应该选择其他 CSS 选择器或替代方法？
最佳答案
:active 表示“激活时”。它专为“当您单击按钮时，它看起来像是被按下，而当您停止单击时，它又弹回”之类的效果而设计。
“单击一组按钮中的最后一个，每个按钮都运行 JavaScript”没有伪类。
您以 XY Problem 的形式表达了您的问题，让我们回到实际问题:
如何选择指向文档当前语言版本的链接？
首先，让您的 JavaScript 不引人注目。
<a class="dropdown-item"
href="/it/this/document"
hreflang="it"><abbr title="Italian">It</abbr></a>
<script>
const langlinks = Array.from(document.querySelector(".dropdown-item"));
langlinks.forEach(link => link.addEventListener("click", changeLang);
function changelang (event) {
window.lang.change(event.target.hreflang);
event.preventDefault();
}
</script>
然后确保当你改变语言时，你在标记中表达它:
<html lang="it">
然后你可以使用 language pseudo-class 编写一个选择器:
html:lang(it) .dropdown-menu[hreflang=it] {
/* ... */
}
遗憾的是，我们无法使用 CSS 以编程方式将 it 的两个实例映射到那里，因此您需要为每种语言包含一个选择器。
关于javascript - 为什么伪类:active work?没有，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56900952/