Question

我的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>

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

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

Answer 1

检查你是否成功添加了jQuery并在document.ready事件中绑定事件。你的代码似乎工作。您还错过了class="navtop

的收尾报价

添加jQuery

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

将代码放入document.ready

<强> Live Demo

$(document).ready(function(){
   $("li").click(function (event) {
      event.preventDefault();      
      if ($("li").hasClass('active')) {
           $("li").removeClass('active');
      }
      $(this).addClass('active');
   });
});

Answer 2

您的代码永远不会在简单的ASPX页面中运行。单击文本后，您将单击锚点，这将指向另一个加载新页面的页面。

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

另外如果你把“event.preventDefault（）;”广告点击选择代码适用于点击，但导航动作未启动，您的菜单永远不会导航到其他页面。

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

如果您使用ASPX至少使用带有siteMap的ASPX Menu组件，我建议您使用ASPX代码以便更好地维护。

Build a Menu from the web.sitemap file in ASP.NET

<li>活动主页jQuery无法正常工作</li>

2 个答案: