Changing link class based on dates
I have got a list of menus up on our website with the current week's menu highlighted with a different colour background which is decided by a class of 'current' on that item.
At the moment I change this class manually each week but was wondering if there is something I can set that changes the class automatically based on dates that I give.<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 --&g开发者_如何学Got;
<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 -->
And so on. Would appreciate any hints whether through JQuery, PHP, or some other solution...
the simplest and most straightforward (but not necessary most elegant) option, is to use php's date('W') and the modulus operator. Basically, you need to add the following to each menu item's class
<?php if(date('W') % <TOTAL NUMBER> == <ITEM>) echo 'current' ?>
for example, for "corsham-menu" the TOTAL NUMBER will be 6 and ITEM will be from 0 to 5, so the code needs to be like
<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 really nice site you have there! ))
on html code open in each li in class a php tag and use a if statement. If current week echo current
http://www.tizag.com/javascriptT/javascriptdate.php
Try writing an function using the .getDay() in JavaScript. You'd also have to use class names as numbers.. 0 = Sunday, 1 = Monday, etc.
function menuDate() {
var currentDay = currentTime.getDay();
if ($(li).hasClass(currentDay)){
$(li).addClass('current').removeClass('notcurrent');
}
.notcurrent {
display: none;
}
.current {
display: list-item;
}
Here's a simple demo written in javascript/jQuery that calculates the current week number and highlights the list item that has the same id as the current week number. It should work as a start to get you on the way to the functionality that you want.
<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>
Regards, Thomas Kahn
Don't use Javascript to solve this... Use PHP! Let me give you this dynamic solution:
<?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>';
?>
加载中,请稍侯......
精彩评论