Задать вопрос
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 ₽
Бэкэнд-разработчик JavaScript
Wanted. • Москва
от 250 000 до 400 000 ₽
JavaScript Fullstack
OnClass
от 2 000 до 7 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Скрипт python
26 дек. 2024, в 15:04
3000 руб./за проект
Тест c++
26 дек. 2024, в 14:50
2000 руб./за проект
Спинтакс шаблон
26 дек. 2024, в 14:40
15000 руб./за проект
Ещё заказы