堆栈内存溢出
  简体   繁体   English

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

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

 原文  2010-08-25 03:10:27  4   1    javascript/ jquery/ css

问题描述

I've got a single, main nav bar in it's own file, nav_bar.shtml, which every other page includes. 我在自己的文件nav_bar.shtml中有一个主要的导航栏，其他所有页面都包含该文件。 This menu bar is a jQuery menu bar (ApyCom is the name of the company that sells these nav bars). 此菜单栏是jQuery菜单栏（ApyCom是销售这些导航栏的公司的名称）。 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. 导航栏上的项目如何确定其是否处于活动状态（并因此突出显示，以便用户知道）是通过列表项上的class =“ current”。 Here's what I CAN do- I can, with JavaScript, alter my list item's class attribute. 这就是我可以做的-我可以使用JavaScript更改列表项的class属性。 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. 我在JavaScript中有一个switch语句，该语句通过使用window.onload函数中的window.location.href确定哪个列表项的类成为“当前”类。 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. 问题出在这里-即使正确列表项上的类设置为“当前”，它也不会反映在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'. 具体来说，在“功能”下，单击“ 1”。 Now, under Videos, click '2'. 现在，在“视频”下，单击“ 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. 通过单击“视频”->“ 2”注意，“功能”按钮仍处于阴影状态。

Here's my window.onload JavaScript function on my nav_bar.shtml page. 这是我的nav_bar.shtml页面上的window.onload JavaScript函数。 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. 请记住，这样做确实可以实现更改类名的预期功能，我在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: 当我在“功能”下拉菜单上单击“ 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>

And when I click on '2' from the Videos drop down, Firebug shows: 当我从“视频”下拉菜单中单击“ 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>

Notice the "current" is applied appropriately. 请注意，“当前”已正确应用。

1 个解决方案

解决方案1
 0  2010-09-02 13:30:43

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>

暂无
暂无

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

相关问题 当我滚动时，我的导航栏颜色不想随 jquery 改变？ - My nav bar color doesn't want to change with my jquery when I scroll? 当我使用JavaScript更改类时，为什么CSS不会动画？ - Why doesn't the CSS animate when I change the class with JavaScript? 使用CSS或javascript / jQuery，我将使用哪种方法使网站的导航栏看起来更逼真3D？ - using CSS or javascript/jQuery, which method would I use to make my site's nav bar look more 3d-ish? 当我通过jQuery / javascript传递条件单选按钮时，为什么CSS样式表无法反映？ - Why does my CSS stylesheet not reflect when I pass conditional radio buttons through jQuery/javascript? 如何修复导航栏，以便在该人未查看导航栏时删除菜单？ | CSS / Javascript - How Do I Fix the Nav Bar So That the Menu is Removed when the person is not viewing the nav bar? | CSS / Javascript 使用导航栏时不显示<link>标签 - Nav bar doesn't display when I use the <Link> tag 没有 Jquery -- 即使我在正文中有脚本，Javascript 也看不到我的 id:s？ - No Jquery -- Javascript can´t see my id:s even when i have script in body? 如何隔离 html 行，以便 javascript 不影响它并因此在单击时关闭导航栏？ - How do I isolate a line of html so that the javascript doesn't effect it and consequently close the nav bar when clicked? 我的jquery和css粘条，不起作用 - My jquery and css sticky bar,doesn't work 为什么我的导航栏在向下滚动时不隐藏而在向上滚动时出现？ - Why doesn't my nav bar hide when scrolling down and appear when scrolling up?
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM