Изменение класса ссылки на основе дат - PullRequest
Новая
       4

Изменение класса ссылки на основе дат

0 голосов
/ 07 августа 2010

У меня есть список меню на нашем веб-сайте с меню текущей недели, выделенным другим цветным фоном, который определяется классом 'current' для этого элемента.
В настоящий момент я меняю этот класс вручную каждую неделю, но мне было интересно, есть ли что-то, что я могу установить, чтобы оно автоматически меняло класс на основе предоставленных мною дат. 

<div id="corsham-menu" class="content">
<ul>
<li class="menus6"><h5>Menu</h5><a href="#/corsham/A.pdf">A</a></li>
<li class="menus6"><h5>Menu</h5><a href="#/corsham/B.pdf">B</a></li>
<li class="menus6 current"><h5>Menu</h5><a href="#/corsham/C.pdf">C</a></li>
<li class="menus6"><h5>Menu</h5><a href="#/corsham/D.pdf">D</a></li>
<li class="menus6"><h5>Menu</h5><a href="#/corsham/E.pdf">E</a></li>
<li class="menus6"><h5>Menu</h5><a href="#/corsham/F.pdf">F</a></li>
</ul>
</div> <!-- End of Corsham menu -->

<div id="weston-menu" class="content">
<ul>
<li class="menus4"><h5>Menu</h5><a href="#/weston/A.pdf">A</a></li>
<li class="menus4 current"><h5>Menu</h5><a href="#/weston/B.pdf">B</a></li>
<li class="menus4"><h5>Menu</h5><a href="#/weston/C.pdf">C</a></li>
<li class="menus4"><h5>Menu</h5><a href="#/weston/D.pdf">D</a></li>
</ul>
</div> <!-- End of Weston menu -->

И так далее. Буду признателен за любые советы, будь то через JQuery, PHP или другое решение ...

Ответы [ 5 ]

1 голос
/ 07 августа 2010

Самый простой и простой (но не самый элегантный) вариант - использовать дату php ('W') и оператор модуля.По сути, вам нужно добавить следующее к каждому классу пункта меню 

 <?php if(date('W') % <TOTAL NUMBER> == <ITEM>) echo 'current' ?>

, например, для "corsham-menu" ОБЩЕЕ НОМЕР будет 6, а ПУНКТ будет от 0 до 5, поэтому код долженбыть как 

<li class="<?php if(date('W') % 6 == 0) echo 'current' ?> "> Menu A
<li class="<?php if(date('W') % 6 == 1) echo 'current' ?> "> Menu B
<li class="<?php if(date('W') % 6 == 2) echo 'current' ?> "> Menu C
<li class="<?php if(date('W') % 6 == 3) echo 'current' ?> "> Menu D
<li class="<?php if(date('W') % 6 == 4) echo 'current' ?> "> Menu E
<li class="<?php if(date('W') % 6 == 5) echo 'current' ?> "> Menu F

ps действительно хороший сайт у вас там!))

0 голосов
/ 07 августа 2010

Не используйте Javascript для решения этой проблемы ... Используйте PHP! Позвольте мне дать вам это динамическое решение: 

<?php
  // Menu structure
  $menu = array(
    'A' => array('weekNo' => 0, 'url' => '#/corsham/A.pdf', 'title' => 'Menu'),
    'B' => array('weekNo' => 1, 'url' => '#/corsham/B.pdf', 'title' => 'Menu'),
    'C' => array('weekNo' => 2, 'url' => '#/corsham/C.pdf', 'title' => 'Menu')
  );

  // Get week number in range, in this example, 0-2
  $weekNo = date('W') % count($menu); // Get week number

  // Show the menu
  echo '<ul>';
  // Iterate over each menu item
  foreach($menu as $label=>$item){
    echo '<li class="menus6' . ($item['weekNo'] == $weekNo ? ' current' : '') . '"><h5>' . $item['title'] . '</h5><a href="' . $item['url'] . '">' . $label . '</a></li>';
  }
  echo '</ul>';
?>
0 голосов
/ 07 августа 2010

Вот простая демонстрация, написанная на javascript / jQuery, которая вычисляет номер текущей недели и выделяет элемент списка, который имеет тот же идентификатор, что и номер текущей недели. Это должно послужить началом, чтобы помочь вам перейти к нужной вам функциональности. 

<html>
<head>

<!-- jQuery library - I get it from Google API's -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">
<!-- Function for calculating the week number -->
Date.prototype.getWeek = function() {
    var determinedate = new Date();
    determinedate.setFullYear(this.getFullYear(), this.getMonth(), this.getDate());
    var D = determinedate.getDay();
    if(D == 0) D = 7;
    determinedate.setDate(determinedate.getDate() + (4 - D));
    var YN = determinedate.getFullYear();
    var ZBDoCY = Math.floor((determinedate.getTime() - new Date(YN, 0, 1, -6)) / 86400000);
    var WN = 1 + Math.floor(ZBDoCY / 7);
    return WN;
}

<!-- The jQuery code -->
$(function(){
    var today = new Date();
    var weekno = today.getWeek();

    $("li#" + weekno).addClass("current");

});

</script>

<style>
li.current {
    font-weight: bold;
    color: #ff0000;
}
</style>

</head>
<body>

<ul id="myWeekList">
<li id="29">Week 29</li>
<li id="30">Week 30</li>
<li id="31">Week 31</li>
<li id="32">Week 32</li>
<li id="33">Week 33</li>
<li id="34">Week 34</li>
<li id="35">Week 35</li>
<li id="36">Week 36</li>
</ul>

</body>

</html>

С уважением, Томас Кан

0 голосов
/ 07 августа 2010

http://www.tizag.com/javascriptT/javascriptdate.php

Попробуйте написать функцию, используя .getDay () в JavaScript.Вы также должны использовать имена классов в качестве чисел .. 0 = воскресенье, 1 = понедельник и т. Д. 

function menuDate() {
  var currentDay = currentTime.getDay();
  if ($(li).hasClass(currentDay)){
    $(li).addClass('current').removeClass('notcurrent');
    }

.notcurrent {
display: none;
}

.current {
display: list-item;
}
0 голосов
/ 07 августа 2010

в html-коде откройте в каждом li в классе тег php и используйте оператор if. Если текущая неделя эхосигнала

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...