如何设置DIV或LI“;类“;按星期几

How to set a DIV or LI "class" by day of the week?

本文关键字：LI 何设置 设置 DIV      更新时间：2023-09-26

如果我有一个每天都有div和UL的7天日历，我如何将"今天"类添加到一周中的LI"天"中？（即周一、周二、周三等）

基本上，我只想在页面加载中突出显示一周中的哪一天。

我想这可以用jQuery完成，但我刚刚掌握了窍门，所以任何能为我指明正确方向的建议都将不胜感激。

以下是我用于内容的基本HTML：

  <div id="main_content">
   <div id="weekly_schedule">
     <ul class="day_container">
       <li class="day">Su</li>
       <li class="day_content">content</li>
     </ul>
     <ul class="day_container">
       <li class="day">Mo</li>
       <li class="day_content">content</li>
     </ul>
     <ul class="day_container">
       <li class="day">Tu</li>
       <li class="day_content">content</li>
     </ul>
     <ul class="day_container">
       <li class="day">We</li>
       <li class="day_content">content</li>
     </ul>
     <ul class="day_container">
       <li class="day">Th</li>
       <li class="day_content">content</li>
     </ul>
     <ul class="day_container">
       <li class="day">Fr</li>
       <li class="day_content">content</li>
     </ul>
     <ul class="day_container">
       <li class="day">Sa</li>
       <li class="day_content">content</li>
     </ul>
  </div>
</div>

您可以尝试以下操作：

$('li.day:eq(' + new Date().getDay() + ')').addClass('today');

这是我的小提琴手希望它能有所帮助。如果你有问题，请告诉我。

var dayOfWeek = new Date().getDay() - 1;
var selectedUl = $('#weekly_schedule:nth-child(' + dayOfWeek + ')');
// Do whatever you want with selectedUl, such as .addClass('highlighted')

您可以在没有jQuery的情况下完成，只需使用纯JavaScript:

var date = new Date().getDay()*2;
document.getElementsByTagName('LI')[date].parentNode.className += " today";​

下面是一个jsFiddle示例。

我也遇到过同样的问题。我使用JavaScript想出了以下解决方案（尽管我不确定这是否是最好的方法）。

HTML:

<div id="days">
  <ul>
    <li id="mon">Mon</li>
    <li id="tue">Tue</li>
    <li id="wed">Wed</li>
    <li id="thur">Thur</li>
    <li id="fri">Fri</li>
    <li id="sat">Sat</li>
    <li id="sun">Sun</li>
  </ul>
</div>

JavaScript:

function startTime() {
  var today = new Date();
  var dayOfWeek = today.getDay();
  if (dayOfWeek == 0) {
    document.getElementById("sun").className = "today";
  } else if (dayOfWeek == 1) {
    document.getElementById("mon").className = "today";
  } else if (dayOfWeek == 2) {
    document.getElementById("tue").className = "today";
  } else if (dayOfWeek == 3) {
    document.getElementById("wed").className = "today";
  } else if (dayOfWeek == 4) {
    document.getElementById("thur").className = "today";
  } else if (dayOfWeek == 5) {
    document.getElementById("fri").className = "today";
  } else if (dayOfWeek == 6) {
    document.getElementById("sat").className = "today";
  } else {}
}
startTime();

因此，这基本上是根据今天的情况将类"today"添加到li标签中

你可以在我的代码笔上看到完整的工作示例-http://codepen.io/AdamCCFC/pen/XbNyeY

相关文章：