Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 07.02.2016, 20:29
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

добавление класса по дням недели
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>
Ответить с цитированием
  #12 (permalink)  
Старый 08.02.2016, 11:53
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

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

Какое разнообразие методик оказывается в йоге, 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');
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как переместить активный слайд? makalet jQuery 0 17.08.2015 17:33
определение дня недели по дате xber9 jQuery 1 29.10.2013 19:44
определить дни недели(( viktor92 Общие вопросы Javascript 5 28.02.2013 11:07
Добавить активный элемент Wirty jQuery 5 09.08.2009 16:06