When I alter an ID's CSS class via Javascript, my jQuery nav bar doesn't reflect the change..???

Question

I've got a single, main nav bar in it's own file, nav_bar.shtml, which every other page includes. This menu bar is a jQuery menu bar (ApyCom is the name of the company that sells these nav bars). How an item on the nav bar determines if it's active or not (and thus highlighting it so the user knows) is through the class="current" on the list item. Here's what I CAN do- I can, with JavaScript, alter my list item's class attribute. I have a switch statement in JavaScript that determines which list item's class to make "current" by using the window.location.href, in the window.onload function. All of this works fine. When I navigate to another page, the correct list item's class is made "current".

Here's where the problem is- even though the class on the correct list item is set to "current", it doesn't reflect on the UI. The Home button is still highlighted when the "Contact Me" button needs to be hightlighted (and SHOULD, since THAT list item's class is set to "current". What I'm thinking is that maybe something is being loaded too late in the page, too early, etc., I have no idea why it's not working out!! Please help!!!

Specifically, under Features, click '1'. Now, under Videos, click '2'. These are my test pages that I'm using to try to get this to work. Notice by clicking Videos -> '2', the 'Features' button is still shaded.

Here's my window.onload JavaScript function on my nav_bar.shtml page. Keep in mind this does what it's supposed to in regards to changing the class names like it's supposed to, and I further verified this in Firebug.

        <script type="text/javascript">

            window.onload = function () {
                function change(id, newClass) {
                    identity = document.getElementById(id);
                    identity.className = newClass;
                }

                switch (window.location.href) {
                    case "http://www.grinderschool.com/mikemarks/1.shtml":
                        change('features', 'current');
                        change('videos', '');
                        break;
                    case "http://www.grinderschool.com/mikemarks/2.shtml":
            change('features', '');
                        change('videos', 'current');
                        break;

                }
            }
        </script>

When I click on '1' on the Features drop down, Firebug shows:

<div id="menu" class="js-active">
    <ul class="menu">
        <li id="features" class="current"><a class="parent" href="http://www.grinderschool.com/" style="background: none repeat scroll 0% 0% transparent;"><span style="background: none repeat scroll 0% 0% transparent; color: rgb(255, 255, 255);">Features</span></a>
            <div style="visibility: hidden;"><ul>
                <li><a href="http://www.grinderschool.com/"&gt;&lt;span style="color: rgb(255, 255, 255);">Home</span></a></li>
                <li><a href="http://www.grinderschool.com/grinderschool-poker-strategy-podcasts.php"&gt;&lt;span style="color: rgb(255, 255, 255);">Podcasts</span></a></li>

                        <li><a href="http://www.grinderschool.com/mikemarks/1.shtml"&gt;&lt;span style="color: rgb(255, 255, 255);">1</span></a></li>

                <li><a href="http://www.grinderschool.com/grinderschool-low-stakes-poker-strategy-articles.shtml"&gt;&lt;span style="color: rgb(255, 255, 255);">Articles</span></a></li>
                <li><a href="http://www.grinderschool.com/grinderschool-low-stakes-poker-strategy-private-coaching.shtml"&gt;&lt;span style="color: rgb(255, 255, 255);">Coaching</span></a></li>
                <li><a href="http://www.grinderschool.com/phpBB3/"&gt;&lt;span style="color: rgb(255, 255, 255);">Forum</span></a></li>
                <li><a href="http://www.grinderschool.com/grinderschool-tournament-series.php"&gt;&lt;span style="color: rgb(255, 255, 255);">GTS</span></a></li>
            </ul></div>
        </li>
        <li id="videos" class=""><a class="parent" href="http://www.grinderschool.com/" style="background: none repeat scroll 0% 0% transparent;"><span style="background: none repeat scroll 0% 0% transparent; color: rgb(255, 255, 255);">Videos</span></a>
            <div style="visibility: hidden;"><ul>
                <li><a href="http://www.grinderschool.com/sample-poker-videos/"&gt;&lt;span style="color: rgb(255, 255, 255);">Sample Videos</span></a></li>

                        <li><a );="" current="" ,="" videos="" change(="" href="http://www.grinderschool.com/mikemarks/2.shtml"&gt;&lt;span style="color: rgb(255, 255, 255);">2</span></a></li>

                <li><a href="http://www.grinderschool.com/how-to-master/"&gt;&lt;span style="color: rgb(255, 255, 255);">How To Master Series</span></a></li>
                <li><a href="http://www.grinderschool.com/grinderschool-poker-strategy-video-listings.php"&gt;&lt;span style="color: rgb(255, 255, 255);">Search/Listings</span></a></li>
                <li><a href="http://www.grinderschool.com/calendar.php"&gt;&lt;span style="color: rgb(255, 255, 255);">Schedule</span></a></li>
                <li><a href="http://www.grinderschool.com/about-grinderschool-low-stakes-poker-strategy-videos-and-coaching.shtml"&gt;&lt;span style="color: rgb(255, 255, 255);">Instructors</span></a></li>
            </ul></div>
        </li>
        <li id="aboutus"><a class="parent" href="http://www.grinderschool.com/" style="background: none repeat scroll 0% 0% transparent;"><span style="background: none repeat scroll 0% 0% transparent; color: rgb(255, 255, 255);">About Us</span></a>
            <div style="visibility: hidden;"><ul>
                <li><a href="http://www.grinderschool.com/about-grinderschool-low-stakes-poker-strategy-videos-and-coaching.shtml"&gt;&lt;span style="color: rgb(255, 255, 255);">Our Team</span></a></li>
                <li><a href="http://www.grinderschool.com/testimonials/"&gt;&lt;span style="color: rgb(255, 255, 255);">Testimonials</span></a></li>
                <li><a href="http://www.grinderschool.com/reviews/"&gt;&lt;span style="color: rgb(255, 255, 255);">Reviews</span></a></li>

                        <li><a href="http://www.grinderschool.com/mikemarks/3.shtml"&gt;&lt;span style="color: rgb(255, 255, 255);">3</span></a></li>

                <li><a href="http://www.grinderschool.com/newsletters/"&gt;&lt;span style="color: rgb(255, 255, 255);">Newsletters</span></a></li>
                <li><a href="http://www.grinderschool.com/advertise-with-grinderschool.shtml"&gt;&lt;span style="color: rgb(255, 255, 255);">Advertise</span></a></li>
                <li><a href="http://www.grinderschool.com/contact-us/ "><span style="color: rgb(255, 255, 255);">Contact Us</span></a></li>
            </ul></div>
        </li>
        <li id="subscribe"><a class="parent" href="http://www.grinderschool.com/" style="background: none repeat scroll 0% 0% transparent;"><span style="background: none repeat scroll 0% 0% transparent; color: rgb(255, 255, 255);">Subscribe</span></a>
            <div style="visibility: hidden;"><ul>
                <li><a href="http://www.grinderschool.com/grinderschool-poker-stratey-site-subscription-plans.shtml"&gt;&lt;span style="color: rgb(255, 255, 255);">Subscription Plans</span></a></li>
                <li><a href="http://www.grinderschool.com/subscribe/"&gt;&lt;span style="color: rgb(255, 255, 255);">Sign Up</span></a></li>
            </ul></div>
        </li>
        <li id="tools"><a class="parent" href="http://www.grinderschool.com/" style="background: none repeat scroll 0% 0% transparent;"><span style="background: none repeat scroll 0% 0% transparent; color: rgb(255, 255, 255);">Tools</span></a>
            <div style="visibility: hidden;"><ul>
                <li><a href="http://www.grinderschool.com/tools/hand-history-converter/"&gt;&lt;span style="color: rgb(255, 255, 255);">Hand History Converter</span></a></li>
                <li><a href="http://poker-tools.flopturnriver.com/Tournament-Hand-History-Converter.php"&gt;&lt;span style="color: rgb(255, 255, 255);">Tournament Trimmer</span></a></li>
                <li><a href="http://www.grinderschool.com/images/range_chart.png"&gt;&lt;span style="color: rgb(255, 255, 255);">Glitlr Short-Stacking Spreadsheet</span></a></li>
                <li><a href="http://www.grinderschool.com/poker-tools/"&gt;&lt;span style="color: rgb(255, 255, 255);">Other Programs</span></a></li>
                <li><a href="http://www.cafepress.com/Grinderschool/"&gt;&lt;span style="color: rgb(255, 255, 255);">Store</span></a></li>
            </ul></div>
        </li>
        <li id="freemembership"><a class="parent" href="http://www.grinderschool.com/" style="background: none repeat scroll 0% 0% transparent;"><span style="background: none repeat scroll 0% 0% transparent; color: rgb(255, 255, 255);">Free Membership</span></a>
            <div style="visibility: hidden;"><ul>
                <li><a href="http://www.grinderschool.com/grinderschool-rakeback-program.php"&gt;&lt;span style="color: rgb(255, 255, 255);">Rakeback</span></a></li>
                <li><a href="http://www.grinderschool.com/grinderschool-prop-player-program.php"&gt;&lt;span style="color: rgb(255, 255, 255);">Propping</span></a></li>
                <li><a href="http://www.grinderschool.com/grinderschool-low-stakes-bonus-grind4free-titan-poker.shtml"&gt;&lt;span style="color: rgb(255, 255, 255);">Titan Poker</span></a></li>
                <li><a href="http://www.grinderschool.com/grinderschool-free-membership.shtml"&gt;&lt;span style="color: rgb(255, 255, 255);">And More!</span></a></li>
            </ul></div>
        </li>

    <li class="back" style="left: 236px; width: 122px; display: block;"><div class="left"></div></li></ul>
</div>

And when I click on '2' from the Videos drop down, Firebug shows:

<div id="menu" class="js-active">
<ul class="menu">
    <li id="features" class=""><a class="parent" href="http://www.grinderschool.com/" style="background: none repeat scroll 0% 0% transparent;"><span style="background: none repeat scroll 0% 0% transparent; color: rgb(255, 255, 255);">Features</span></a>
        <div style="visibility: hidden;"><ul>
            <li><a href="http://www.grinderschool.com/"&gt;&lt;span style="color: rgb(255, 255, 255);">Home</span></a></li>
            <li><a href="http://www.grinderschool.com/grinderschool-poker-strategy-podcasts.php"&gt;&lt;span style="color: rgb(255, 255, 255);">Podcasts</span></a></li>

                    <li><a href="http://www.grinderschool.com/mikemarks/1.shtml"&gt;&lt;span style="color: rgb(255, 255, 255);">1</span></a></li>

            <li><a href="http://www.grinderschool.com/grinderschool-low-stakes-poker-strategy-articles.shtml"&gt;&lt;span style="color: rgb(255, 255, 255);">Articles</span></a></li>
            <li><a href="http://www.grinderschool.com/grinderschool-low-stakes-poker-strategy-private-coaching.shtml"&gt;&lt;span style="color: rgb(255, 255, 255);">Coaching</span></a></li>
            <li><a href="http://www.grinderschool.com/phpBB3/"&gt;&lt;span style="color: rgb(255, 255, 255);">Forum</span></a></li>
            <li><a href="http://www.grinderschool.com/grinderschool-tournament-series.php"&gt;&lt;span style="color: rgb(255, 255, 255);">GTS</span></a></li>
        </ul></div>
    </li>
    <li id="videos" class="current"><a class="parent" href="http://www.grinderschool.com/" style="background: none repeat scroll 0% 0% transparent;"><span style="background: none repeat scroll 0% 0% transparent; color: rgb(255, 255, 255);">Videos</span></a>
        <div style="visibility: hidden;"><ul>
            <li><a href="http://www.grinderschool.com/sample-poker-videos/"&gt;&lt;span style="color: rgb(255, 255, 255);">Sample Videos</span></a></li>

                    <li><a );="" current="" ,="" videos="" change(="" href="http://www.grinderschool.com/mikemarks/2.shtml"&gt;&lt;span style="color: rgb(255, 255, 255);">2</span></a></li>

            <li><a href="http://www.grinderschool.com/how-to-master/"&gt;&lt;span style="color: rgb(255, 255, 255);">How To Master Series</span></a></li>
            <li><a href="http://www.grinderschool.com/grinderschool-poker-strategy-video-listings.php"&gt;&lt;span style="color: rgb(255, 255, 255);">Search/Listings</span></a></li>
            <li><a href="http://www.grinderschool.com/calendar.php"&gt;&lt;span style="color: rgb(255, 255, 255);">Schedule</span></a></li>
            <li><a href="http://www.grinderschool.com/about-grinderschool-low-stakes-poker-strategy-videos-and-coaching.shtml"&gt;&lt;span style="color: rgb(255, 255, 255);">Instructors</span></a></li>
        </ul></div>
    </li>
    <li id="aboutus"><a class="parent" href="http://www.grinderschool.com/" style="background: none repeat scroll 0% 0% transparent;"><span style="background: none repeat scroll 0% 0% transparent; color: rgb(255, 255, 255);">About Us</span></a>
        <div style="visibility: hidden; height: 195px; overflow: hidden;"><ul>
            <li><a href="http://www.grinderschool.com/about-grinderschool-low-stakes-poker-strategy-videos-and-coaching.shtml"&gt;&lt;span style="color: rgb(255, 255, 255);">Our Team</span></a></li>
            <li><a href="http://www.grinderschool.com/testimonials/"&gt;&lt;span style="color: rgb(255, 255, 255);">Testimonials</span></a></li>
            <li><a href="http://www.grinderschool.com/reviews/"&gt;&lt;span style="color: rgb(255, 255, 255);">Reviews</span></a></li>

                    <li><a href="http://www.grinderschool.com/mikemarks/3.shtml"&gt;&lt;span style="color: rgb(255, 255, 255);">3</span></a></li>

            <li><a href="http://www.grinderschool.com/newsletters/"&gt;&lt;span style="color: rgb(255, 255, 255);">Newsletters</span></a></li>
            <li><a href="http://www.grinderschool.com/advertise-with-grinderschool.shtml"&gt;&lt;span style="color: rgb(255, 255, 255);">Advertise</span></a></li>
            <li><a href="http://www.grinderschool.com/contact-us/ "><span style="color: rgb(255, 255, 255);">Contact Us</span></a></li>
        </ul></div>
    </li>
    <li id="subscribe"><a class="parent" href="http://www.grinderschool.com/" style="background: none repeat scroll 0% 0% transparent;"><span style="background: none repeat scroll 0% 0% transparent; color: rgb(255, 255, 255);">Subscribe</span></a>
        <div style="visibility: hidden; height: 70px; overflow: hidden;"><ul>
            <li><a href="http://www.grinderschool.com/grinderschool-poker-stratey-site-subscription-plans.shtml"&gt;&lt;span style="color: rgb(255, 255, 255);">Subscription Plans</span></a></li>
            <li><a href="http://www.grinderschool.com/subscribe/"&gt;&lt;span style="color: rgb(255, 255, 255);">Sign Up</span></a></li>
        </ul></div>
    </li>
    <li id="tools"><a class="parent" href="http://www.grinderschool.com/" style="background: none repeat scroll 0% 0% transparent;"><span style="background: none repeat scroll 0% 0% transparent; color: rgb(255, 255, 255);">Tools</span></a>
        <div style="visibility: hidden; height: 170px; overflow: hidden;"><ul>
            <li><a href="http://www.grinderschool.com/tools/hand-history-converter/"&gt;&lt;span style="color: rgb(255, 255, 255);">Hand History Converter</span></a></li>
            <li><a href="http://poker-tools.flopturnriver.com/Tournament-Hand-History-Converter.php"&gt;&lt;span style="color: rgb(255, 255, 255);">Tournament Trimmer</span></a></li>
            <li><a href="http://www.grinderschool.com/images/range_chart.png"&gt;&lt;span style="color: rgb(255, 255, 255);">Glitlr Short-Stacking Spreadsheet</span></a></li>
            <li><a href="http://www.grinderschool.com/poker-tools/"&gt;&lt;span style="color: rgb(255, 255, 255);">Other Programs</span></a></li>
            <li><a href="http://www.cafepress.com/Grinderschool/"&gt;&lt;span style="color: rgb(255, 255, 255);">Store</span></a></li>
        </ul></div>
    </li>
    <li id="freemembership"><a class="parent" href="http://www.grinderschool.com/" style="background: none repeat scroll 0% 0% transparent;"><span style="background: none repeat scroll 0% 0% transparent; color: rgb(255, 255, 255);">Free Membership</span></a>
        <div style="visibility: hidden; height: 120px; overflow: hidden;"><ul>
            <li><a href="http://www.grinderschool.com/grinderschool-rakeback-program.php"&gt;&lt;span style="color: rgb(255, 255, 255);">Rakeback</span></a></li>
            <li><a href="http://www.grinderschool.com/grinderschool-prop-player-program.php"&gt;&lt;span style="color: rgb(255, 255, 255);">Propping</span></a></li>
            <li><a href="http://www.grinderschool.com/grinderschool-low-stakes-bonus-grind4free-titan-poker.shtml"&gt;&lt;span style="color: rgb(255, 255, 255);">Titan Poker</span></a></li>
            <li><a href="http://www.grinderschool.com/grinderschool-free-membership.shtml"&gt;&lt;span style="color: rgb(255, 255, 255);">And More!</span></a></li>
        </ul></div>
    </li>

<li class="back" style="left: 236px; width: 122px; display: block; overflow: hidden;"><div class="left"></div></li></ul>

Notice the "current" is applied appropriately.

Answer 1

Try this adjustment...

    <script type="text/javascript">

        function change(id, newClass) {
            // using jQuery

            // Remove the "current" class from all elements
            $("."+newClass).removeClass(newClass);

            // Add the "current" class to the selected item
            $("#"+id).addClass(newClass);
        }

        window.onload = function () {
            switch (window.location.href) {
                case "http://www.grinderschool.com/mikemarks/1.shtml":
                    change('features', 'current');
                    change('videos', '');
                    break;
                case "http://www.grinderschool.com/mikemarks/2.shtml":
        change('features', '');
                    change('videos', 'current');
                    break;

            }
        }
    </script>