[英]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>
當我滾動時，我的導航欄顏色不想隨 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
沒有 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?
為什么我的導航欄在向下滾動時不隱藏而在向上滾動時出現？
[英]Why doesn't my nav bar hide when scrolling down and appear when scrolling up?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.