偽類：active為什么不起作用？

Question

我的網頁上有一個Bootstrap下拉按鈕，我給了它四個下拉菜單項。 每個腳本都有一個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

:active表示“正在被激活”。 它設計用於諸如“單擊按鈕時看起來像被按下，而停止單擊時它又彈出又彈出”這樣的效果。

沒有“單擊的一組按鈕中的每個按鈕都運行JavaScript”的偽類。

您已經以XY問題的形式表達了您的問題，因此讓我們回到實際問題：

如何選擇指向文檔當前語言版本的鏈接？

首先，使您的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">

然后，您可以使用偽類語言編寫選擇器：

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

遺憾的是，我們無法使用CSS it其中以編程方式映射它的兩個實例，因此您需要為每種語言都包括一個選擇器。

偽類：active為什么不起作用？

問題描述

1 個解決方案

解決方案1
1 2019-07-05 10:26:47

偽類：active為什么不起作用？

問題描述

1 個解決方案

解決方案1 1 2019-07-05 10:26:47

解決方案1
1 2019-07-05 10:26:47