Задать вопрос
AleksMey
@AleksMey
Пытаюсь разобраться
javascript

Как добавить класс для div в зависимости от месяца на js?

Есть условные табы на бутстрап. Каждый таб имеет в id название месяца и класс active, который активирует таб.

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

<nav>
  <div class="nav nav-tabs" id="nav-tab" role="tablist">
    <button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#january" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Зима</button>
    <button class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#march" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">Весна</button>   
  </div>
</nav>
<div class="tab-content" id="nav-tabContent">
  <div class="tab-pane fade show active" id="january" role="tabpanel" aria-labelledby="nav-home-tab">Выводится в январе</div>
  <div class="tab-pane fade" id="march" role="tabpanel" aria-labelledby="nav-profile-tab">Выводится в марте</div> 
</div>
  • Вопрос задан
  • 52 просмотра
2 комментария
Подписаться 1 Простой 2 комментария
Решения вопроса 1
AleksMey
@AleksMey Автор вопроса
Пытаюсь разобраться
Смог решить как-то так. Может кому пригодится: 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
    .active {
      color: red;
    }
  </style>
</head>
<body>
  <div id="january">January</div>
  <div id="february">February</div>
  <div id="march">March</div>
  <div id="april">April</div>
  <div id="may">May</div>
  <div id="june">June</div>
  <div id="july">July</div>
  <div id="august">August</div>
  <div id="september">September</div>
  <div id="october">October</div>
  <div id="november">November</div>
  <div id="december">December</div>
  <script>
    let date = new Date();
    let month = date.toLocaleString('en', { month: 'long' }).toLowerCase();
    document.getElementById(month).classList.add("active");
  </script>
</body>
</html>
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Fullstack разработчик JavaScript, php
Дорстрой-36 • Воронеж
от 100 000 до 200 000 ₽
JavaScript FullStack developer
Wanted. • Санкт-Петербург
До 220 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Перерисовать логотип в вектор
23 нояб. 2024, в 08:36
2000 руб./за проект
Необходимо доработать несколько задач
23 нояб. 2024, в 07:32
75000 руб./за проект
Сделать бэкап сайта(форума) и установить его на сервер
23 нояб. 2024, в 04:31
2000 руб./за проект
Ещё заказы