我正在尝试创建一些短代码，这些代码将根据当前月份更改一组链接的类别。基本上，如果月份已经过去，“a”将是 class="inactive"，如果月份是当前月份，"a"将是 class="active"，如果月份尚未发生，它将是 class= “无”。
这是我想用 javascript 自动更新的一些博客代码，这样当月份发生变化时，最近过去的一个月(以及之前的所有月份)切换到类“inactive”并且新月份变为“active”，这是我的 CSS 定义的样式。
这是我的 block 的 HTML:
<div class="container">
<div><a id="item1" class="inactive" href="january.html">january</a></div>
<div><a id="item2" class="inactive" href="february.html">february</a></div>
<div><a id="item3" class="inactive" href="march.html">march</a></div>
<div><a id="item4" class="inactive" href="april.html">april</a></div>
<div><a id="item5" class="inactive" href="may.html">may</a></div>
<div><a id="item6" class="inactive" href="june.html">june</a></div>
<div><a id="item7" class="inactive" href="july.html">july</a></div>
<div><a id="item8" class="active" href="august.html">august</a></div>
<div><a id="item9" class="none" href="september.html">september</a></div>
<div><a id="item10" class="none" href="october.html">october</a></div>
<div><a id="item11" class="none" href="november.html">november</a></div>
<div><a id="item12" class="none" href="december.html">december</a></div>
</div>
如您所见，我们的想法是使用 getMonth() 脚本将八月代码的类更改为“不活动”，并在我们到达九月后将九月类更改为“事件”。
我已经看到很多 Javascript 片段可以工作，但老实说我不确定实现这个目标的最佳途径，因为我的 Javascript 技能不是很好。也许循环会更可取，因为它可以获取“a”的 ID，也许使用数组，可以运行检查然后根据 getMonth() 变量编写适当的类？
这是我目前使用的一些代码:
<script>
var item = [1,2,3,4,5,6,7,8,9,10,11,12];
iLen = item.length;
for (i = 0; i < iLen; i++) {
if(item[i]<getMonth()) {
document.getElementById("item").class="inactive";
} else if(item[i]==getMonth()) {
document.getElementById("item").class="active";
} else if(item[i]>getMonth()) {
document.getElementById("item").class="none";
}
</script>
不幸的是，我在数组方面遇到了困难，所以我在替换类代码本身时遇到了问题，但如果这是解决此问题的好方法，我希望得到您的反馈。
最佳答案
简单的解决方案，实例:
function checkMonth() {
var item = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
var actualMonth = new Date().getMonth() + 1;
for (i = 0; i < item.length; i++) {
if (item[i] < actualMonth) {
document.getElementById("item" + (i + 1)).classList.add("inactive");
} else if (item[i] == actualMonth) {
document.getElementById("item" + (i + 1)).classList.add("active");
} else {
document.getElementById("item" + (i + 1)).classList.add("none");
}
}
var exceptionMonth = [3];
for (i = 0; i < exceptionMonth.length; i++) {
document.getElementById("item" + exceptionMonth[i]).classList.add("none");
}
}.inactive {
color: gray;
}
.active {
color: limegreen;
font-weight: bold;
}
.none {
color: silver;
}<body onload="checkMonth();">
<div class="container">
<div><a id="item1" href="january.html">january</a></div>
<div><a id="item2" href="february.html">february</a></div>
<div><a id="item3" href="march.html">march</a></div>
<div><a id="item4" href="april.html">april</a></div>
<div><a id="item5" href="may.html">may</a></div>
<div><a id="item6" href="june.html">june</a></div>
<div><a id="item7" href="july.html">july</a></div>
<div><a id="item8" href="august.html">august</a></div>
<div><a id="item9" href="september.html">september</a></div>
<div><a id="item10" href="october.html">october</a></div>
<div><a id="item11" href="november.html">november</a></div>
<div><a id="item12" href="december.html">december</a></div>
</div>
</body>第二个问题:
var monthNames = ["January", "February", "March", "April", "May", "June"];
monthNames.push("July", "August", "September", "October", "November", "December");
var actualMonth = document.getElementsByClassName("pagetitle");
for (i = 0; i < actualMonth.length; i++) {
var monthNome = monthNames[new Date().getMonth()].toUpperCase();
// toUpperCase() on both sides to simlulate an ignoreCase
if (actualMonth[i].innerText.toUpperCase().indexOf(monthNome) != -1) {
actualMonth[i].classList.add("spotlightMonth");
}
}body {
border: 1px solid whitesmoke;
}
table {
width: 100%;
text-align: center;
}
.pagetitle {
display: grid;
font-size: 13px;
text-align: center;
}
.spotlightMonth {
color: blue;
font-size: 26px;
font-weight: bold;
}
div {
margin: 26px;
}<table>
<td class="pagetitle">March</td>
<td class="pagetitle">August</td>
<td class="pagetitle">December</td>
</table>
<div>This month is August</div>
<div>Remember just pagetitle class will be styled with spotlightMonth class</div>关于javascript - 使用 Javascript 更改基于 getMonth() 的链接类，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57437744/