根據日期更改鏈接等級

我在我們的網站上獲得了一個菜單列表，當前一週的菜單中突出顯示了不同的顏色背景，該背景由該項目上的「當前」類決定。
目前我每週都要手動更改這個類，但是想知道是否有一些我可以設置的內容會根據我給出的日期自動更改類。根據日期更改鏈接等級

<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 2010-08-07 13:05:42

此刻沒有日期。這一週的日期並不重要，只是當前班級每週開始移動到下一個列表項目等，然後在到達列表末尾時移回列表頂部。 – James 2010-08-11 20:32:28

最簡單，最直接的（但不是必需的最優雅的）的選項，是使用PHP的日期（ 'W'）和模數運算符。基本上，你需要將以下添加到每個菜單項的類

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

例如，對於「科斯罕菜單」的總數將是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真的很好的網站，你有！））

來源

2010-08-07 13:10:34 user187291

感謝您的Stereofrog。現在，很抱歉，但你必須在這裏稍微引導我。我已經實現了這一點，但你能否爲我清除這個問題。這會將「當前」課程每週正確地輪換到下一個項目嗎？目前它已在每個列表上選擇一個看似隨機的選擇作爲「當前」類。我該如何設置本週應該是最新的起始列表項目？哇，希望有道理。這裏有一個當前鏈接（減去CSS清潔） http://images.snapdragonsnursery.com/html/menus/menu-selector.php – James 2010-08-11 20:22:29

其實，我可能已經明白了。但是如果你能確認這一切都可以，我們將不勝感激。我只是簡單地旋轉項目編號，以便在某些列表中它會變爲2,3,0,1，而不是按數字順序排列。正確的項目現在突出顯示。那麼你會認爲這會繼續起作用嗎？ – James 2010-08-11 20:43:49

太棒了 - 感謝您的幫助。 – James 2010-08-12 07:37:11

關於html代碼在每個li中打開php標籤並使用if語句。如果本週回聲電流

來源

2010-08-07 12:59:40 Sotiris

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

試着寫使用JavaScript中的.getDay（）的函數。你也不得不使用類名稱爲數字.. 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 2010-08-07 13:06:51

我會強烈避免使用Javascript進行這種簡單的靜態操作。 PHP可以完成這項工作，更容易，更廣泛的受衆... – Harmen 2010-08-07 13:10:45

下面是一個用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

根據日期更改鏈接等級

回答

相關問題