0

我的 Mastepage 上有一个菜单，如下所示：

<div class="navtop">
    <ul class="nav">
        <li class=""><a href="Default.aspx">Home</a></li>
        <li class=""><a href="Test.aspx">Link</a></li>
        <li class=""><a href="Hello.aspx">Link</a></li>
        <li class=""><a href="World.aspx">Link</a></li>
    </ul>
</div>

要将类设置<li></li>为活动，我正在使用此 Javascript 代码：

<script>
    $("li").click(function () {
        alert("this is the message");
        if ($("li").hasClass('active')) {
            $("li").removeClass('active');
        }
        $(this).addClass('active');
    });
</script>

这应该有效，因为我在某个地方看到了这个，他们说它应该有效。但这对我不起作用，我的菜单保留为空 class="" 并且来自 javascript 的警报消息（用于测试它）也不起作用。

有人能帮我吗？我究竟做错了什么？

4

2 回答 2

1

检查您是否已成功添加 jQuery 并将事件绑定到 document.ready 事件中。你的代码似乎工作。你也错过了这里的结束语class="navtop

添加 jQuery

<script src="http://code.jquery.com/jquery-latest.min.js"
        type="text/javascript"></script>

将代码放入 document.ready

现场演示

$(document).ready(function(){
   $("li").click(function (event) {
      event.preventDefault();      
      if ($("li").hasClass('active')) {
           $("li").removeClass('active');
      }
      $(this).addClass('active');
   });
});
于 2013-07-21T18:07:29.653 回答
0

您的代码永远不会在简单的 ASPX 页面中工作。单击文本后，您将单击锚点，这将导航到加载新页面的另一个页面。

Javascript 在客户端执行，但是当您单击链接时，您正在执行服务器导航到其他页面加载阳极 html 页面，该页面再次调用新页面中的 $(document).onReady(...)。

此外，如果你把“event.preventDefault();” 广告单击选择代码在单击时起作用，但未启动导航操作，并且您的菜单永远不会导航到其他页面。

你需要在 ASPX 中使用标记来检测当前使用的子页面或传递更改 javascript 中的变量以将正确的项目加载为活动状态。

如果您使用 ASPX，我建议您至少使用带有站点地图的 ASPX 菜单组件，这会使您的 ASPX 代码更好地维护。

从 ASP.NET 中的 web.sitemap 文件构建菜单

于 2013-07-21T18:40:22.840 回答