Javascript 导航只工作一次，然后什么也不做

我试图用四个元素来编写一个导航栏。如果元素当前被选中，它将有一个“红色”背景图像，如果它是其他3个元素之一，它将有一个“黑色”背景图像。我的四个标签是“时间表、作业、通知和运动” 我试着做了8个函数，比如下面的2个

function setTimeRed() 
{
    document.getElementById("time").style.ClassName = 'timetable_r';
}

function setTimeBlack() 
{
    document.getElementById("time").style.ClassName = 'time_r';
}

然后是这样的四个街区：

function changeTimeButton()
{
    var timePath = new String();
    timePath = document.getElementById("timetable").style.backgroundImage;

    if(timePath == "url(assets/img/tabs/time_black.png)" || timePath == "")
    {
        setTimeRed();
        setHomeBlack();
        setNotiBlack();
        setSportBlack();
    }
    else {

    }  
}

document.getElementById("timetable").className = 
document.getElementById("timetable").className.replace
( /(?:^|\s)time_b(?!\S)/ , '' )

最后，我的html包含以下内容：

<div id="tabbar">
            <ul id="tabs">

                <a href"#" onclick="changeTimeButton()">
                    <li id="timetable" class="time_b">
                        <p>Timetable</p>
                    </li>
                </a>

                <a href"#" onclick="changeHomeButton()">
                    <li id="homework" class="home_b">
                        <p>Homework</p>
                    </li>
                </a>

                <a href"#" onclick="changeNotiButton()">
                    <li id="notifications" class="noti_b">
                        <p>Notifications</p>
                    </li>
                </a>

                <a href"#" onclick="changeSportButton()">
                    <li id="sport"  class="sport_b">
                        <p>Sport</p>
                    </li>
                </a>

            </ul>

        </div>

---

它工作一次，然后什么也不做。为什么？

我认为您的脚本中有错误，仅举一个例子

document.getElementById("time").style.ClassName = 'timetable_r';

应该是（在html中没有id为“time”的元素，至少在您发布的代码中是这样）

---

另一件事，如果它只工作一次，那么它可能会在新会话或现有会话中保存一些问题。我不是javascript方面的专家。但如果有帮助，请告知。

关闭背景色时，您需要删除任何现有类，如下所示：

function changeTimeButton()
{
    var timePath = new String();
    timePath = document.getElementById("timetable").style.backgroundImage;

    if(timePath == "url(assets/img/tabs/time_black.png)" || timePath == "")
    {
        setTimeRed();
        setHomeBlack();
        setNotiBlack();
        setSportBlack();
    }
    else {

    }  
}

document.getElementById("timetable").className = 
document.getElementById("timetable").className.replace
( /(?:^|\s)time_b(?!\S)/ , '' )

因为您使用的是类，而不是修改javascript中的样式，所以应该坚持这样做。您似乎试图在javascript中设置背景图像。 相反，您应该将该背景图像应用于CSS中的类样式

使用像jQuery这样的框架会使这变得更容易，因为它具有诸如addClass（）、toggleClass（）和removeClass（）之类的帮助函数。您还应在“li”内设置“a”标记。在我看来，这有助于代码更简洁。浏览器仍将读取单击并能够正确应用类

此外，您不必在代码中如此频繁地重复自己。一种解决方案是创建一个泛型函数，并将元素的id作为参数传入。然后，使用“活动”类而不是“时间表”。活动类将应用于活动链接，您不必多次写出函数。希望这能有所帮助。

您能提供一个（可能）可行的例子吗？这将大大简化bug的查找。