Почему псевдокласс: активная работа? - PullRequest
Новая
       31

Почему псевдокласс: активная работа?

0 голосов
/ 05 июля 2019

На моей веб-странице есть выпадающая кнопка 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" присваивается синий цвет.

Это пример того, что я пытаюсь сделать:

example

Я хочу, чтобы цвет этого выпадающего элемента оставался синим все время, пока язык страницы "французский".

Я пытался использовать CSSпсевдокласс :active для достижения этой цели, но это не сработало: 

.dropdown-item:active{
    background-color: black;
    color: blue;
}

В частности, цвет фона преобразуется в «черный» только при нажатии на элемент, тогда как я хочу егооставаться черным до тех пор, пока не будет выбран другой язык.

Использую ли я неправильный псевдокласс или мне следует выбрать другой селектор CSS или альтернативный метод?

1 Ответ

1 голос
/ 05 июля 2019

: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 : 

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

К сожалению, мы не можем сопоставить два экземпляра it там программно с помощью CSS, поэтому вам нужно будет включить селектор для каждого языка.

...