Изменение атрибутов класса CSS ⇐ CSS

[Гость]

Для моего меню я бы лучше использовал вкладки, а не раскрывающиеся списки.

Я использовал пример W3Schools, чтобы попытаться закрыть каждую вкладку, когда она теряет фокус, но не могу найти способ сделать это. Вот их пример (разрешено в соответствии с их Условиями). Я понимаю, как преобразовать это в адаптивное для ПК/смартфона (включая гамбургер-меню), и буду заполнять меню с помощью кода PHP/SQL, управляемого базой данных.

тело {семейство шрифтов: Arial;} /* Оформление вкладки */ .tab { переполнение: скрыто; граница: 1 пиксель, сплошная #ccc; цвет фона: #f1f1f1; } /* Оформление кнопок внутри вкладки */ кнопка .tab { цвет фона: наследовать; плыть налево; граница: нет; контур: нет; курсор: указатель; отступ: 14 пикселей 16 пикселей; переход: 0,3 с; размер шрифта: 17 пикселей; } /* Изменение цвета фона кнопок при наведении */ Кнопка .tab: наведите { цвет фона: #ddd; } /* Создаём активный/текущий класс табуляции */ .tab button.active { цвет фона: #ccc; } /* Оформление содержимого вкладки */ .tabcontent { дисплей: нет; отступы: 6 пикселей 12 пикселей; граница: 1 пиксель, сплошная #ccc; граница-верх: нет; } /* Оформление кнопки закрытия */ .в правом верхнем углу { плавать: вправо; курсор: указатель; размер шрифта: 28 пикселей; } .topright:hover {цвет: красный;} Вкладки Нажмите кнопку x в правом верхнем углу, чтобы закрыть текущую вкладку:
Лондон Париж Токио &times Лондон
Лондон – столица Англии.
&times Париж
Париж — столица Франции.
&times Токио
Токио — столица Японии.
функция openCity(evt, cityName) { вар я, tabcontent, вкладки; tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent.style.display = "нет"; } tablinks = document.getElementsByClassName("tablinks"); for (i = 0; i < tablinks.length; i++) { tablinks.className = tablinks.className.replace(" active", ""); } document.getElementById(cityName).style.display = "блок"; evt.currentTarget.className += "активный"; } // Получаем элемент с id="defaultOpen" и кликаем по нему document.getElementById("defaultOpen").click();
Я пробовал

Lorem Ipsum.... для каждой вкладки и много подобных примеров, но ничего не работает.

Я попробовал несколько способов прослушивания onclick и т. д., как описано, но ни один из них не заработал.