Question

我正在尝试使用四个元素编写导航栏。如果当前选择了元素，它将具有“红色”背景图像，如果它是另一个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 {

    }  
}

最后，我的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>

它工作一次然后什么都不做。为什么呢？

Answer 1

我认为错误在你的脚本中，只是一个例子

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

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

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

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

Answer 2

关闭背景颜色时，您需要删除任何现有的类：

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

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

使用像jQuery这样的框架会使这更容易，因为它具有辅助函数，如addClass（），toggleClass（）和removeClass（）。您还应该在'li'中设置'a'标签。在我看来，它使代码更清晰。浏览器仍然会读取点击并能够正确应用这些类。

此外，您不必在代码中经常重复自己。一种解决方案是创建泛型函数并将元素的id作为参数传递。然后，您使用'active'类而不是'timetable_r'。活动类将应用于活动链接，您不必多次编写这些函数。希望这会有所帮助。

导航工作一次，但后来没有

2 个答案: