gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-30 06:48:32 26 4
gpt4 key购买 nike

我在它自己的文件 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/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com