добавление класса по дням недели
Galyanov,
способ каким делать не надо в нормальном случае <!DOCTYPE HTML> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> .is-active{ background-color: #0000FF; color: #FFFFFF; } .is-active a{ color: #FFFFFF; } </style> </head> <body> <ul class="tabs" data-tabs id="example-tabs"> <li class="tabs-title is-active"><a href="#panel1" aria-selected="true">Пн</a></li> <li class="tabs-title"><a href="#panel2">Вт</a></li> <li class="tabs-title"><a href="#panel3">Ср</a></li> <li class="tabs-title"><a href="#panel4">Чт</a></li> <li class="tabs-title"><a href="#panel5">Пт</a></li> <li class="tabs-title"><a href="#panel6">Сб</a></li> <li class="tabs-title"><a href="#panel7">Вс</a></li> </ul> <div class="tabs-content" data-tabs-content="example-tabs"> <div class="tabs-panel is-active" id="panel1"> Расписание понедельника </div> <div class="tabs-panel" id="panel2"> Расписание вторника </div> <div class="tabs-panel" id="panel3"> Расписание среды </div> <div class="tabs-panel" id="panel4"> Расписание четверга </div> <div class="tabs-panel" id="panel5"> Расписание пятницы </div> <div class="tabs-panel" id="panel6"> Расписание субботы </div> <div class="tabs-panel" id="panel7"> Расписание воскресенья </div> </div> <script> var day = (new Date).getDay()||7; var li = document.querySelector(".tabs-title.is-active"); li.classList.remove("is-active"); li.querySelector("a").removeAttribute("aria-selected"); document.querySelector(".tabs-panel.is-active").classList.remove("is-active"); li = document.querySelectorAll(".tabs-title")[--day]; li.classList.add("is-active"); li.querySelector("a").setAttribute("aria-selected","true"); document.querySelectorAll(".tabs-panel")[day].classList.add("is-active"); </script> </body> </html> |
В конце каждой недели заполняется расписание на новую неделю путем редактирования существующих, просто дата в заголовке меняется.
Какое разнообразие методик оказывается в йоге, 365 в году, и до пока смерть не разлучит... :) Это скорее на рекомендации на дни недели похоже, а не на расписание, тогда да, есть резон это делать на клиенте, иначе ошибка может быть в 10 часов. Тогда не надо при запросе клиента этой страницы определять понедельник как текущий день <li class="tabs-title <div class="tabs-panel Расписание понедельника </div> А при открытии страницы добавлять стиль элементам по индексу текущей даты (используется ли у вас JQ не знаю, это пример на нем): var day = ((new Date).getDay()||7)-1; $('li.tabs-title').eq(day).addClass('is-active').children().attr('aria-selected', 1); $('div.tabs-content div').eq(day).addClass('is-active'); |
Часовой пояс GMT +3, время: 03:17. |