Question

我有一个菜单结构，位于由CMS控制的母版页中，除了javascript，CSS和原始HTML之外我没有编程可访问性。它看起来像这样：

<div id="menu">
<ul>
<li><a href="Menu1.aspx" target="_self" class="active_nav">Menu Option 1</a></li>
<li><a href="Menu2.aspx" target="_self">Menu Option 2</a></li>
<li><a href="Menu3.aspx" target="_self">Menu Option 3</a></li>
</ul>   
</div>

我需要将.active_nav更改为他们所在页面的li。在javaScript或jQuery中最简单的方法是什么？

Answer 1

$('#menu>ul>li').click(function() {
    $('#menu>ul>li').removeClass('active_nav');
    $(this).addClass('active_nav');
});

默认情况下，您可能希望对CSS类使用连字符。这是标准做法。毕竟这不是Python。

此外，这不应该在客户端或JavaScript上完成。每次用户转到不同的页面时，JavaScript都会重新加载，这意味着在浏览器重定向到目标位置之前，您的链接只会包含活动类。但是一旦用户导航到菜单项的链接，该菜单项将丢失active_nav类，因为JavaScript和其他所有内容都将从catch或其他方式重新加载，具体取决于您的服务器设置。

底线是您需要从服务器端执行此操作。基本上，当使用PHP或您正在使用的任何其他服务器端语言呈现页面时，您应该根据URL突出显示当前项目。这是常见的做事方式。

完全在JavaScript中完成它的唯一方法是，如果您正在编写Ajax应用程序，这意味着用户实际上不会访问不同的页面，而只能看到实时从服务器加载的不同内容。如果您告诉我您正在使用的服务器端语言，那么我将能够提供更多帮助。

此外，谷歌可以提供帮助，因为这是一个非常常见的问题。

Answer 2

可能你需要使用当前窗口位置来知道应该突出显示哪些li，就像这样（在你必须清除所有active_nav类之前：

    $('#menu a').each(function() {
      var currentUrl = document.URL;
       if (currentUrl.indexOf($(this).attr('href')) <> -1 ){
         $(this).addClass('active_nav');
       }
});

此致

使用javascript基于页面将类分配给li

2 个答案: