繁体   English   中英

当我通过Javascript更改ID的CSS类时,我的jQuery导航栏无法反映所做的更改。

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

我在自己的文件nav_bar.shtml中有一个主要的导航栏,其他所有页面都包含该文件。 此菜单栏是jQuery菜单栏(ApyCom是销售这些导航栏的公司的名称)。 导航栏上的项目如何确定其是否处于活动状态(并因此突出显示,以便用户知道)是通过列表项上的class =“ current”。 这就是我可以做的-我可以使用JavaScript更改列表项的class属性。 我在JavaScript中有一个switch语句,该语句通过使用window.onload函数中的window.location.href确定哪个列表项的类成为“当前”类。 所有这些都很好。 当我导航到另一个页面时,正确的列表项的类被设置为“当前”。

问题出在这里-即使正确列表项上的类设置为“当前”,它也不会反映在UI上。 当需要突出显示“与我联系”按钮时,“主页”按钮仍然突出显示(并且应该,因为该列表项的类设置为“当前”。我在想,可能是页面中加载的太晚了) ,还为时过早等等,我不知道为什么它无法解决问题!

具体来说,在“功能”下,单击“ 1”。 现在,在“视频”下,单击“ 2”。 这些是我用来使其正常工作的测试页。 通过单击“视频”->“ 2”注意,“功能”按钮仍处于阴影状态。

这是我的nav_bar.shtml页面上的window.onload JavaScript函数。 请记住,这样做确实可以实现更改类名的预期功能,我在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>

当我在“功能”下拉菜单上单击“ 1”时,Firebug显示:

<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/"><span style="color: rgb(255, 255, 255);">Home</span></a></li>
                <li><a href="http://www.grinderschool.com/grinderschool-poker-strategy-podcasts.php"><span style="color: rgb(255, 255, 255);">Podcasts</span></a></li>

                        <li><a href="http://www.grinderschool.com/mikemarks/1.shtml"><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"><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"><span style="color: rgb(255, 255, 255);">Coaching</span></a></li>
                <li><a href="http://www.grinderschool.com/phpBB3/"><span style="color: rgb(255, 255, 255);">Forum</span></a></li>
                <li><a href="http://www.grinderschool.com/grinderschool-tournament-series.php"><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/"><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"><span style="color: rgb(255, 255, 255);">2</span></a></li>

                <li><a href="http://www.grinderschool.com/how-to-master/"><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"><span style="color: rgb(255, 255, 255);">Search/Listings</span></a></li>
                <li><a href="http://www.grinderschool.com/calendar.php"><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"><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"><span style="color: rgb(255, 255, 255);">Our Team</span></a></li>
                <li><a href="http://www.grinderschool.com/testimonials/"><span style="color: rgb(255, 255, 255);">Testimonials</span></a></li>
                <li><a href="http://www.grinderschool.com/reviews/"><span style="color: rgb(255, 255, 255);">Reviews</span></a></li>

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

                <li><a href="http://www.grinderschool.com/newsletters/"><span style="color: rgb(255, 255, 255);">Newsletters</span></a></li>
                <li><a href="http://www.grinderschool.com/advertise-with-grinderschool.shtml"><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"><span style="color: rgb(255, 255, 255);">Subscription Plans</span></a></li>
                <li><a href="http://www.grinderschool.com/subscribe/"><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/"><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"><span style="color: rgb(255, 255, 255);">Tournament Trimmer</span></a></li>
                <li><a href="http://www.grinderschool.com/images/range_chart.png"><span style="color: rgb(255, 255, 255);">Glitlr Short-Stacking Spreadsheet</span></a></li>
                <li><a href="http://www.grinderschool.com/poker-tools/"><span style="color: rgb(255, 255, 255);">Other Programs</span></a></li>
                <li><a href="http://www.cafepress.com/Grinderschool/"><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"><span style="color: rgb(255, 255, 255);">Rakeback</span></a></li>
                <li><a href="http://www.grinderschool.com/grinderschool-prop-player-program.php"><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"><span style="color: rgb(255, 255, 255);">Titan Poker</span></a></li>
                <li><a href="http://www.grinderschool.com/grinderschool-free-membership.shtml"><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>

当我从“视频”下拉菜单中单击“ 2”时,Firebug显示:

<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/"><span style="color: rgb(255, 255, 255);">Home</span></a></li>
            <li><a href="http://www.grinderschool.com/grinderschool-poker-strategy-podcasts.php"><span style="color: rgb(255, 255, 255);">Podcasts</span></a></li>

                    <li><a href="http://www.grinderschool.com/mikemarks/1.shtml"><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"><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"><span style="color: rgb(255, 255, 255);">Coaching</span></a></li>
            <li><a href="http://www.grinderschool.com/phpBB3/"><span style="color: rgb(255, 255, 255);">Forum</span></a></li>
            <li><a href="http://www.grinderschool.com/grinderschool-tournament-series.php"><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/"><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"><span style="color: rgb(255, 255, 255);">2</span></a></li>

            <li><a href="http://www.grinderschool.com/how-to-master/"><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"><span style="color: rgb(255, 255, 255);">Search/Listings</span></a></li>
            <li><a href="http://www.grinderschool.com/calendar.php"><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"><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"><span style="color: rgb(255, 255, 255);">Our Team</span></a></li>
            <li><a href="http://www.grinderschool.com/testimonials/"><span style="color: rgb(255, 255, 255);">Testimonials</span></a></li>
            <li><a href="http://www.grinderschool.com/reviews/"><span style="color: rgb(255, 255, 255);">Reviews</span></a></li>

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

            <li><a href="http://www.grinderschool.com/newsletters/"><span style="color: rgb(255, 255, 255);">Newsletters</span></a></li>
            <li><a href="http://www.grinderschool.com/advertise-with-grinderschool.shtml"><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"><span style="color: rgb(255, 255, 255);">Subscription Plans</span></a></li>
            <li><a href="http://www.grinderschool.com/subscribe/"><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/"><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"><span style="color: rgb(255, 255, 255);">Tournament Trimmer</span></a></li>
            <li><a href="http://www.grinderschool.com/images/range_chart.png"><span style="color: rgb(255, 255, 255);">Glitlr Short-Stacking Spreadsheet</span></a></li>
            <li><a href="http://www.grinderschool.com/poker-tools/"><span style="color: rgb(255, 255, 255);">Other Programs</span></a></li>
            <li><a href="http://www.cafepress.com/Grinderschool/"><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"><span style="color: rgb(255, 255, 255);">Rakeback</span></a></li>
            <li><a href="http://www.grinderschool.com/grinderschool-prop-player-program.php"><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"><span style="color: rgb(255, 255, 255);">Titan Poker</span></a></li>
            <li><a href="http://www.grinderschool.com/grinderschool-free-membership.shtml"><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>

请注意,“当前”已正确应用。

尝试此调整...

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

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM