0

Всем привет. У меня есть такой список и мне нужно что бы при загрузке страницы к первой кнопке с классом .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>

1 ответ 1

0

Зачем 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>

1
  • спасибо большое!!!
    – Олег
    Commented 9 авг. 2022 в 8:04

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.