Форум

рони · #11 (**permalink**) 07.02.2016, 20:29

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>

laimas · #12 (**permalink**) 08.02.2016, 11:53

В конце каждой недели заполняется расписание на новую неделю путем редактирования существующих, просто дата в заголовке меняется.

Какое разнообразие методик оказывается в йоге, 365 в году, и до пока смерть не разлучит...

Это скорее на рекомендации на дни недели похоже, а не на расписание, тогда да, есть резон это делать на клиенте, иначе ошибка может быть в 10 часов.

Тогда не надо при запросе клиента этой страницы определять понедельник как текущий день

<li class="tabs-title ~~is-active~~"><a href="#panel1" ~~aria-selected="true"~~>Пн</a></li> - зачем тут "true" не понятно, строка она и в Африке строка.

<div class="tabs-panel ~~is-active~~" id="panel1">
Расписание понедельника
</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');

Форум

Справочник

Discord чат

Курсы javascript