Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Apr 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Navigation Bar Works Once then stops working

    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!

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,355
    Thanks
    11
    Thanked 558 Times in 551 Posts
    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).


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •