Navigation Bar Works Once then stops working

**cjhoney** · Apr 9, 2012 03:20

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:

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

**ralph.m** · Apr 9, 2012 04:53

Hi cjhoney. Welcome to the forums.

That all looks a bit convoluted. It's easier to style links like that using CSS or PHP. Have a look at this recent thread which discusses both approaches:

http://www.sitepoint.com/forums/show...-CSS&p=5091887

**cjhoney** · Apr 9, 2012 07:18

Thanks ralph, my only problem is that this has to function locally, I can't use any server-side code, I'm quite familiar with php, but a lot less so with JavaScript thus this project is taking some time... Is there a better way to do this in JavaScript, maybe with jquery?

**ralph.m** · Apr 9, 2012 08:14

Yes, it's easy with jQuery:

http://css-tricks.com/snippets/jquer...-current-page/
http://www.webringideas.com/web-deve...tion-link.html
http://stackoverflow.com/questions/2...-page-in-jquer

But don't forget the CSS option, too. It works with JS off, and doesn't require a big library.

(I guess if you are already downloading the library for other purposes, that's irrelevant, of course.)

**cjhoney** · Apr 9, 2012 08:51

The links don't really help, I think I'm taking the wrong approach.... My aim is to have one file that ALL the content is viewed in, with two navigation bars, one at the top, one at the bottom, and a sort of "window" in the middle. The bottom navigation has four links, and the one at the top has three, but the three top links are different depending on what page you are viewing. so when I click the timetable link on the bottom navigation, I get the timetable for the day, with the day link at the top of the page selected. When I click "week" on the top, the 'Timetable' stays selected but the the 'day' becomes deselected, and the content in the window changes to the week. I don't need any special effects, or flashes or shiny buttons. I just need this simple page, but I CANNOT load a new page entirely, all the content has to be available through the index.html file. AND it all has to function from a flash drive on any computer, so no online links or content. It's really confusing me... How would I go about doing this?

**ralph.m** · Apr 9, 2012 17:28

Are you talking about a page kind of like this:

http://www.grigorlawyers.com.au/

As you click the menu links, the page scrolls up or down, and the current section link is highlighted.

This is all done with JavaScript.