1

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

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

4

2 回答 2

1

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

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

应该是（至少在您在此处发布的代码中，您的 html 中没有 ID 为“时间”的元素）

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

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

于 2012-04-09T10:19:02.780 回答
1

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

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

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

使用像 jQuery 这样的框架会更容易，因为它有一些辅助函数，比如 addClass()、toggleClass() 和 removeClass()。您还应该在“li”内设置“a”标签。在我看来，它使代码更简洁。浏览器仍会读取点击并能够正确应用类。

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

于 2012-04-09T13:17:47.127 回答