Добавить класс при загрузке страницы

Question

Всем привет. У меня есть такой список и мне нужно что бы при загрузке страницы к первой кнопке с классом .tablinks добавился класс .active. Это как я понимаю нужно через js делать, я в нем не разбираюсь поэтому прошу помощи

button {
  display: block;
}
.active {
  background-color: red;
}

<div class="tab">
      <button class="tablinks">Шутеры</button>
      <button class="tablinks">Гонки</button>
      <button class="tablinks">Симуляторы</button>
      <button class="tablinks">Приключения</button>
      <button class="tablinks">Спортивные</button>
      <button class="tablinks">Детские</button>
      <button class="tablinks">Хорроры</button>
</div>

Answer 1

Зачем JS?

button {
  display: block;
}
.active {
  background-color: red;
}

<div class="tab">
      <button class="tablinks active">Шутеры</button>
      <button class="tablinks">Гонки</button>
      <button class="tablinks">Симуляторы</button>
      <button class="tablinks">Приключения</button>
      <button class="tablinks">Спортивные</button>
      <button class="tablinks">Детские</button>
      <button class="tablinks">Хорроры</button>
</div>

Но если так надо,то:

document.querySelector('.tablinks:first-child').classList.add('active');

button {
  display: block;
}
.active {
  background-color: red;
}

<div class="tab">
      <button class="tablinks">Шутеры</button>
      <button class="tablinks">Гонки</button>
      <button class="tablinks">Симуляторы</button>
      <button class="tablinks">Приключения</button>
      <button class="tablinks">Спортивные</button>
      <button class="tablinks">Детские</button>
      <button class="tablinks">Хорроры</button>
</div>

БЛОГ НА HUSL

Добавить класс при загрузке страницы

Ответы (1 шт):