我正在尝试在页面加载后根据其所在的页面将一个active类(即class="active")添加到适当的菜单列表项。下面是我现在的菜单。我已经尝试了在这方面可以找到的所有代码片段,但是没有任何效果。因此,有人可以简单解释一下在何处以及如何在JavaScript中添加以定义此任务吗?
active
class="active"
<ul id="nav"> <li id="navhome"><a href="home.aspx">Home</a></li> <li id="navmanage"><a href="manageIS.aspx">Manage</a></li> <li id="navdocso"><a href="docs.aspx">Documents</a></li> <li id="navadmin"><a href="admin.aspx">Admin Panel</a></li> <li id="navpast"><a href="past.aspx">View Past</a></li> </ul>
这是我在网站管理员中将head标签放入的javascript的示例。我究竟做错了什么?
$(document).ready(function () { $(function () { $('li a').click(function (e) { e.preventDefault(); $('a').removeClass('active'); $(this).addClass('active'); }); }); });
这不起作用的原因是因为javascript正在执行,然后页面正在重新加载,这使“活动”类无效。您可能想做的是:
$(function(){ var current = location.pathname; $('#nav li a').each(function(){ var $this = $(this); // if the current path is like this link, make it active if($this.attr('href').indexOf(current) !== -1){ $this.addClass('active'); } }) })
在某些情况下,这是行不通的(多个类似指向的链接),但是我认为这可能对您有用。