javascript - 当我通过 Javascript 更改 ID 的 CSS 类时，我的 jQuery 导航栏没有反射(reflect)更改..？-6ren

javascript - 当我通过 Javascript 更改 ID 的 CSS 类时，我的 jQuery 导航栏没有反射(reflect)更改..？

转载作者：行者123 更新时间：2023-11-30 06:48:32

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

这就是问题所在 - 即使正确列表项上的类设置为“当前”，它也不会反射(reflect)在 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>

关于javascript - 当我通过 Javascript 更改 ID 的 CSS 类时，我的 jQuery 导航栏没有反射(reflect)更改..？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3562616/

文章推荐： javascript - Javascript 中的 Cookie

文章推荐： java - 为什么第一个电话这么长？

文章推荐： java - PathIterator 中 while 循环的功能是什么？

reflection - 将 reflect.value 转换为 reflect.method
我有: func NewMethodDescriptor(typ interface{}) *MethodDescriptor { reflectedMethod := reflect.Val
reflection - 去反射(reflect)。如何检查 reflect.Type 是否为错误类型？
我需要确定地检查 reflect.Type 是否是一个错误。错误没有反射(reflect)类型。在 go reflect 中检查类型错误的正式/惯用方式是什么？ Go Playground Full
reflection - reflect.Value.MapIndex() 返回一个不同于 reflect.ValueOf() 的值
根据 reflect 文档 reflect.Value.MapIndex() 应返回一个 reflect.Value，它表示存储在 map 特定键处的数据的值.所以我的理解是以下两个表达式应该是相同的
reflection - 在golang中，反射(reflect)pkg，8g错误 "undefined: reflect.NewValue"
与 reflect pkg 有点混淆所有示例都使用 reflect.NewValue() 来获取 var 的 reflect.Value，但是 func NewValue 未记录在 http://g
reflection - 反射(reflection)的词源？
在计算机语言的上下文中，我从未找到关于反射的词源的明确解释，所以我想在这里澄清一下。 “Reflection”源于拉丁语，有以下definitions : bend back turn back tu
reflection - 反射(reflection) ExpandoObject
我写了一个漂亮的函数，它可以接受 system.object ，反射(reflect)其属性并将对象序列化为 JSON 字符串。它看起来像这样: public class JSONSerializer
reflection - 反射(reflect)类型参数
我正在尝试创建一个函数 import Language.Reflection foo : Type -> TT 我尝试使用reflect 策略: foo = proof { intro t
reflection - 反射(reflection)用例
最近我和一位同事谈论 C++，感叹没有办法获取带有类字段名称的字符串并提取具有该名称的字段；换句话说，它缺乏反射(reflection)。他困惑地看着我，并问什么时候有人需要做这样的事情。除了“嘿，
reflection - 最佳实践 : What to use Reflection for?
我正在考虑允许模块与属性文件中的类一起使用的想法；像 availableModules.properties Contact=org.addressbook.ContactMain Business=
Java 等于(): to reflect or not to reflect
这个问题特别与为具有大量字段的对象覆盖 equals() 方法有关。首先，让我说这个大对象不能在不违反 OO 原则的情况下分解成多个组件，所以告诉我“没有类应该有超过 x 个字段”无济于事。继续前进
reflection - 如何反射(reflect)Golang中对象的动态方法名
例子 router.Get(path, handler) // works fine methodStr = "Get" router.methodStr(path, handler) // e
reflection - Go: reflect : 调用输入参数太少
我一直坚持使用反射库的问题。由于很多推荐，我决定使用它，但我只是在学习，有些部分并不是很容易.. 我有这部分代码: func countDataByName(sourceName string, s
reflection - 如何使用 reflect 遍历结构
我有一个包含一些 url 参数的特定结构，我想使用 reflect 构建一个 url 参数字符串以遍历结构字段，这样我就不会关心结构真正包含什么。假设我有一个这样的结构: type Student
reflection - reflect.Value 的字符串方法无法按预期工作
我正在尝试从 reflect.Value 中检索字符串值，我希望 value.String()成为okok但我得到了相反。我错过了什么吗？ package main import ( "f
java - org.reflections.Reflections 线程安全吗
为了避免创建 org.reflections.Reflections 类的多个实例，我只想创建一个并根据需要重用。有谁知道这个类是否是线程安全的？如果它不是线程安全的，我知道我可以使用 Java 的
reflection - 引用、具体化和反射(reflection)的关系
我最近对引用、具体化和反射(reflection)感到困惑。有人可以很好地解释他们的关系和差异(如果有的话)吗？最佳答案引用这可能是最简单的一个。考虑一下当您在 REPL 中键入以下内容时会发生
reflection - golang 反射(reflect)创建对象报错
less main.go输出: ``` package main import ( "reflect" "net/url" "fmt" ) type User struct {
reflection - 使用 gorm 库进行反射(reflect)
我在 golang 中使用 gorm 包 ( https://github.com/jinzhu/gorm ) 作为我的数据库库。我有很多类(数据库表)，如“酒店”或“套餐”。复制代码不是好的编程习惯
reflection - 使用 reflect.Set 设置字段
我有代码 var t reflect.Type = LaunchController(route.controller) // create controller ptr . var
reflection - golang 获取类型的 reflect.Type
是否有可能以及如何在不从类型创建对象并调用它的情况下获取类型的 reflect.Type reflect.TypeOf(obj) Java 中的内容是:MyType.class 最佳答案您可以使用以

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

javascript - 当我通过 Javascript 更改 ID 的 CSS 类时，我的 jQuery 导航栏没有反射(reflect)更改..？