Navigation Bar Works Once then stops working

cjhoney · 04-09-2012, 11:22 AM

I'm trying to create a navigation bar with four elements. If the element is currently selected it will have a "red" background image, if it is one of the other 3, it will have a "black" background image. my four tabs are 'timetable, homework, notifications and sport' I tried making 8 functions like the 2 below

Code:

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

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

And then four blocks like this:

Code:

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 {

    }  
}

finally, my html has this:

Code:

<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>

It works once then does nothing. Why, and how would I go about fixing this?? Please help!

devnull69 · 04-10-2012, 11:13 AM

ClassName is not a CSS style property. It's called "className" and is a direct property to a HTML DOM element.

Code:

document.getElementById("time").className = 'timetable_r';

And you should not check for the current background image url but rather for the current className.

Last but not least you should have only two classes ... one class for every element(!) that sets the background-color to black and one class only for the current element that sets the background-color to red. This way you won't need to have a separate class for every single element.

On click of an element you remove the second class from every element and add it only to the current one (referred by the "this" keyword).