Как сделать кнопку на сайте изначально (при загрузке страницы) активной, включённой?

113
09 февраля 2021, 10:10

(1) В шапке сайта есть две кнопки отвечающие за смену языков.

Мне нужно кнопку "RU", изначально сделать активной, изначально - при загрузке страницы. Активной, значит вот такой (2).

Как я могу это сделать? Я пытался принудительно ставить класс x-presses, принудительно запускать события, но всё это не работает.

Answer 1

Задайте кнопке первоначальное состояние, например:

<button class="active"></button> 

Tаким образом, кнопка при загрузке сайта будет иметь нужное состояние.
Все что остается сделать, логику для переключения языков.

В комментариях к моему ответу, Вы написали что у Вас переключает при нажатие на любую часть сайта, по этому написал небольший скрипт, который возможно поможет Вам решить проблему:

  var languageOptions = document.querySelectorAll('.language-option'); 
 
  languageOptions.forEach(function(element, index) { 
    element.addEventListener('click', switchLanguage); 
  }); 
 
  function switchLanguage (event) { 
    var targetElement = event.target; 
 
    languageOptions.forEach(function(element, index) { 
      element.classList.remove('active'); 
    }); 
 
    targetElement.classList.add('active'); 
  }
html, body { 
  display: flex; 
  flex-direction: column; 
  height: 100%; 
  width: 100%; 
  align-items: center; 
  justify-content: top; 
  margin: 0; 
  padding: 0; 
} 
 
button { 
  width: 200px; 
  height: 50px; 
} 
 
button.active { 
  background-color: green; 
}
<div class="header"> 
  <button id="ru" class="language-option active">RU</button> 
  <button id="en" class="language-option">EN</button> 
</div>

READ ALSO
Как округлить число до 1000?

Как округлить число до 1000?

Имею ползунок с шагом в 1000Необходимо сделать функцию, которая будет округлять при клике на произвольную область ползунка

91
Удалить некоторые символы в строке JSON.stringify

Удалить некоторые символы в строке JSON.stringify

Нужно вывести весь объект в виде строки, но в таком формате, чтобы не было скобок которые автоматически создаются

86
Как сделать добавление элемента в конец с эффектом спойлера?

Как сделать добавление элемента в конец с эффектом спойлера?

Я знаю, что для спойлера есть функцияslideToggle и для добавления в конец

107