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

добавление класса по дням недели
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>
Ответить с цитированием