Question

我的网页上有一个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选择器或替代方法？

Answer 1

<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>表示“正在被激活”。它设计用于“当您单击一个按钮时，它看起来像被按下，而当您停止单击时，它又弹出又弹出”这样的效果。

“单击的一组按钮中的最后一个按钮没有伪类”，每个按钮都运行JavaScript。

您已经以XY Problem的形式表达了您的问题，所以让我们回到实际问题：

如何选择指向文档当前语言版本的链接？

首先，使您的JavaScript不引人注目。

<html lang="it">

然后确保当您更改语言时，可以在标记中表达它：

html:lang(it) .dropdown-menu[hreflang=it] {
    /* ... */
}

然后，您可以使用language pseudo-class编写选择器：

it

遗憾的是，我们无法使用CSS以编程方式映射Execution failed to transform for task ':app:javaPrecompileDebug' Failed to transform 'localSDK.jar' using Jetifier. Reason: Method code too large!. (Run with --stacktrace for more details).的两个实例，因此您需要为每种语言包括一个选择器。

伪类：active为什么不起作用？

1 个答案: