1

我正在尝试根据一天中的时间更改代码中的一些类。我可以让背景改变得很好，但我也需要改变菜单颜色。我似乎无法在页面中的链接中添加一个类来让它们也发生变化！不知道我哪里出错了，任何帮助将不胜感激，谢谢！

PS我也尝试过jQuery css（），也没有运气......

function getDayTime(hours) {
if (hours > 20 || hours < 5)
    return "night";

if (hours > 17)
    return "dusk";

if (hours > 8)
    return "day";

return "dawn";
}

$(function() {
    document.body.className = getDayTime(new Date().getHours());
});

太棒了，非常感谢大家的帮助，我已经更改了 javascript，它也很好用。但是，我现在也在尝试将黎明颜色更改为白色 - 即使我将其编码为与更改为白色相同的代码，它仍然保持红色！很明显，我的系统里没有足够的咖啡……

body.dawn #menu a {
    color:#fff !important
}

body.day #menu a {
    color:#8a0000 !important
}

body.dusk #menu a {
    color:#fff !important
}

body.night #menu a {
    color:#fff !important
}
4

3 回答 3

3

在 jQuery 中你没有className. 看看addClass和类似的。

但是，我会建议您在 CSS 中使用类似的内容：

body.night a {
    /* your style for the 'nightlink' with !important to be sure */
}

所以你不需要要求 JS 来检索和迭代页面中的所有 A 节点。此外，如果您将动态添加链接，使用 CSS 方法，样式也会自动应用于它们。

编辑：与原始问题无关，但我认为您可以使用以下内容简化 js 代码中的条件：

function getDayTime(hours) {
    if (hours > 20 || hours < 5)
        return "night";

    if (hours > 17)
        return "dusk";

    if (hours > 8)
        return "day";

    return "dawn";
}

$(function() {
    document.body.className = getDayTime(new Date().getHours());
});
于 2012-05-23T22:18:57.453 回答
0

我不知道你的 CSS 是什么样的，但你可以这样做：

假设您的 CSS 如下所示：

<style type="text/css">
  body { /* some stuff here */ }
  body.day { /* some day stuff here */ }
  body.night { /* some night stuff here */ }
  #menu { /* some stuff here */ }
  #menu a { /* some menu link styling here */ }

  /* To change #menu when body has class="day" */
  body.day #menu { // change menu when it's day }
  body.day #menu a { // change menu links */ }

  /* To change #menu when body has class"night" */
  body.night #menu { /* change menu when it's night */ }
  body.night #menu a { // change menu links */ }
</style>
于 2012-05-23T22:19:02.997 回答
0 
$("a").addClass("nightlink")

应该管用

于 2012-05-23T22:19:22.450 回答