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

У меня есть список меню на нашем веб-сайте с меню текущей недели, выделенным другим цветом, который определяется классом «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 или какое-то другое решение ...

источник

2010-08-07 James

Где ваши даты? – NullUserException

Нет дат в данный момент. На самом деле не имеет значения даты недели, только то, что «текущий» класс переходит к следующему элементу списка и так далее, как только начинается каждая неделя, прежде чем вернуться к началу списка, когда он достигнет конца. – James

простейшим и наиболее простой (но не обязательно самый элегантный вариант) и т.д., чтобы использовать дату РНР ('W') и оператор модуля. В принципе, вам нужно добавить следующие строки в класс каждого пункта меню

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

, например, для «Коршего меню» ОБЩЕЕ КОЛИЧЕСТВО будет 6 и ITEM будет от 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 действительно хороший сайт у вас там есть!))

источник

2010-08-07 13:10:34 user187291

Спасибо за это Stereofrog. Теперь, извините, но вам придется немного навестить меня здесь. Я реализовал это хорошо, но вы можете просто прояснить это для меня. Это вернет текущий класс к следующему элементу недели за неделей? На данный момент он выбрал по-видимому случайный выбор в каждом списке как «текущий» класс. Как установить начальный элемент списка, который должен быть текущим на этой неделе? Вау, надеюсь, что имеет смысл. Вот текущая ссылка (минус чистота CSS) http://images.snapdragonsnursery.com/html/menus/menu-selector.php – James

На самом деле, возможно, у меня есть. Но было бы признательно, если бы вы могли подтвердить, что все в порядке.Я просто повернул номера позиций, чтобы в некоторых списках вместо 2, 3, 0, 1 вместо того, чтобы быть в цифровом порядке. Теперь выделены правильные элементы. Так будет ли это продолжаться работать, как вы думаете? – James

Фантастический - спасибо за помощь. – James

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

источник

2010-08-07 12:59:40 Sotiris

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; 
}

источник

2010-08-07 13:05:27

мог бы [отредактировать ваш предыдущий ответ] (http://stackoverflow.com/posts/3430520/edit) вместо его удаления и отправки нового. – Gordon

Я бы очень сильно избегал использования Javascript для такого простого статического действия. PHP может сделать работу, даже проще, достичь более широкой аудитории ... – Harmen

Вот простая демонстрация, написанная в 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>

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

источник

2010-08-07 13:17:46 tkahn

Не использовать 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>'; 
?>

источник

2010-08-07 13:22:39 Harmen

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

ответ

Смежные вопросы