Question

我的网站上有一个菜单列表，当前一周的菜单以不同的颜色背景突出显示，该菜单由该项目的“当前”类决定。
目前我每周都会手动更改这个类，但是想知道是否有我可以设置的内容根据我给出的日期自动更改类。

<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还是其他解决方案，都会感激任何提示......

Answer 1

最简单，最直接（但不是最优雅）的选项，是使用php的日期（'W'）和模数运算符。基本上，您需要将以下内容添加到每个菜单项的类

中

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

例如，对于“corsham-menu”，TOTAL NUMBER将为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你真的很不错的网站！））

Answer 2

在html代码中打开每个li中的一个php标记并使用if语句。如果当前周回波电流

Answer 3

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

Answer 4

这是一个用javascript / jQuery编写的简单演示，用于计算当前周数，并突出显示与当前周数具有相同ID的列表项。它应该作为一个开始，让您开始实现您想要的功能。

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

此致托马斯卡恩

Answer 5

不要使用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>';
?>

根据日期更改链接类

5 个答案: