-2

我有一个位于母版页中的菜单结构，由 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 中执行此操作的最简单方法是什么？

4

2 回答 2

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 应用程序，这意味着用户实际上不会转到不同的页面，而只会看到从服务器实时加载的不同内容。如果您告诉我您使用的是哪种服务器端语言，那么我将能够提供更多帮助。

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

于 2012-12-15T22:42:15.397 回答
1

可能您需要使用当前窗口位置来了解应该突出显示的 li，如下所示（在您必须清除所有 active_nav 类之前：

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

问候

于 2012-12-15T22:54:21.867 回答