Navigation Bar Works Once then stops working

JavaScript
1

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

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

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

And then four blocks like this:

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:

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

2

Hi cjhoney. Welcome to the forums. :slight_smile:

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:

3

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?

4

Yes, it’s easy with jQuery:

http://www.webringideas.com/web-development/simplest-jquery-script-to-highlight-current-pages-navigation-link.html
http://stackoverflow.com/questions/2955851/highlight-current-page-in-jquer

But don’t forget the CSS option, too. It works with JS off, and doesn’t require a big library. :slight_smile: (I guess if you are already downloading the library for other purposes, that’s irrelevant, of course.)

5

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?

6

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.

7

Or, is the functionality that’s being look for like a tabbed interface?

8

Yay!! Thanks Paul, that’s exactly what I’m looking for, I just need to implement two. Can you put a tab within one of the tabs?

9

Yes you can. Nested tabs demo