将活动类添加到当前页面导航链接
嗨，我需要帮助使我的导航显示当前页面上突出显示的活动链接。 换句话说，当我点击链接转到新页面时，我希望在打开新页面后突出显示该链接。 我可以通过在每个页面上的活动链接添加一个类来处理这个问题，但由于会有很多页面，我宁愿用JS动态地执行此操作。
我怎么能用Javascript做到这一点？…我将非常感谢你的帮助，谢谢。
下面是我正在使用的代码，您可以随意编辑。
这是HTML，只是一个结构导航的列表
CSS（非常小，仅用于测试目的）：
body { font-family: Helvetica, Arial, sans-serif; font-size: 0.9em; } p { line-height: 1.5em; } #main {font-size:2em;} ul.menu, ul.menu ul { list-style-type:none; margin: 0; padding: 0; width: 15em; } ul.menu a { display: block; text-decoration: none; font-family: Georgia, "Times New Roman", Times, serif; font-size: 2em; } ul.menu li { margin-top: 1px; } ul.menu li a, ul.menu ul.menu li a { color: #666; padding: 0.5em; font-weight: bold; font-size: 1em; } ul.menu li a:hover, ul.menu ul.menu li a:hover { color: #900; } ul.menu li ul li a, ul.menu ul.menu li ul li a { color: #999; padding-left: 20px; } ul.menu li ul li a:hover, ul.menu ul.menu li ul li a:hover { color: #900; } ul.menu ul.menu li a:hover { border-left: 0; padding-left: 0.5em; } ul.menu ul.menu { border-left: 5px #f00 solid; } ul.menu a.active, ul.menu ul.menu li a.active, ul.menu a.active:hover, ul.menu ul.menu li a.active:hover { color: #900; } div.panel { border: 1px #000 solid; padding: 5px; margin-top: 1px; } ul.menu div.panel a, ul.menu div.panel li a:hover { display :inline; color: #090; margin: 0; padding: 0; font-weight: bold; } ul.menu div.panel a:hover { color: #900; } .code { border: 1px solid #ccc; list-style-type: decimal-leading-zero; padding: 5px; margin: 0; } .code code { display: block; padding: 3px; margin-bottom: 0; } .code li { background: #ddd; border: 1px solid #ccc; margin: 0 0 2px 2.2em; } .indent1 { padding-left: 1em; } .indent2 { padding-left: 2em; } .indent3 { padding-left: 3em; } .indent4 { padding-left: 4em; } .indent5 { padding-left: 5em; } .indent6 { padding-left: 6em; } .indent7 { padding-left: 7em; } .indent8 { padding-left: 8em; } .indent9 { padding-left: 9em; } .indent10 { padding-left: 10em; }
JavaScript：
jQuery.fn.initMenu = function() { return this.each(function(){ var theMenu = $(this).get(0); $('.acitem', this).hide(); $('li.expand > .acitem', this).show(); $('li.expand > .acitem', this).prev().addClass('active'); $('li a', this).click( function(e) { e.stopImmediatePropagation(); var theElement = $(this).next(); var parent = this.parentNode.parentNode; if($(parent).hasClass('noaccordion')) { if(theElement[0] === undefined) { window.location.href = this.href; } $(theElement).slideToggle('normal', function() { if ($(this).is(':visible')) { $(this).prev().addClass('active'); } else { $(this).prev().removeClass('active'); } }); return false; } else { if(theElement.hasClass('acitem') && theElement.is(':visible')) { if($(parent).hasClass('collapsible')) { $('.acitem:visible', parent).first().slideUp('normal', function() { $(this).prev().removeClass('active'); } ); return false; } return false; } if(theElement.hasClass('acitem') && !theElement.is(':visible')) { $('.acitem:visible', parent).first().slideUp('normal', function() { $(this).prev().removeClass('active'); }); theElement.slideDown('normal', function() { $(this).prev().addClass('active'); }); return false; } } } ); }); }; $(document).ready(function() {$('.menu').initMenu();});
为此，您需要能够将每个链接中的一些唯一元素与页面的其他唯一元素（例如URL）进行比较。
看看你有什么，你可以通过比较URL来逃脱。 您必须获取当前页面的位置，解析URL以获取文件名（最后一个/之后的URL的最后一部分），然后浏览导航的每个href，解析其中的每一个，然后创建一个比较。 如果匹配，请向该链接添加一个类。
抓住这个问题的是，这不是处理它的最佳方式。 另一个问题是，如果您在网站上碰巧有两个页面具有相同的文件名（这是闻所未闻的）。
我认为在BODY标签中使用唯一类唯一标识每个页面可能是处理它的最佳方法。
所以，也许你的身体标签是：
然后在导航中添加一个类：
Contact us
然后你会有一个CSS块，它将在每页基础上设置这些：
.page-contactus .link-contactus {[add active style]} .page-home .link-home {[add active style]} .page-etc .link-etc {[add active style]}