的jQuery/JavaScript的 - 高亮的菜单时，它的用户点击

嗨
假设我有一个菜单，如：的jQuery/JavaScript的 - 高亮的菜单时，它的用户点击

<ul> 
<li><a href="xxx">notebook</a></li> 
<li><a href="xxx">camera</a></li> 
<li><a href="xxx">phone</a></li> 
</ul>

当我点击菜单上，菜单将被如果点击另一个突出，菜单中，此菜单将突出显示，其他菜单将返回原始状态（不突出显示）。有人可以给我一些想法如何做到这一点（为<li>或其他任何东西创建一个监听器）？
感谢您

来源

2010-12-16 Charles Yeung

你有什么JavaScript的尝试到目前为止？ – JasCav 2010-12-16 16:41:54

当用户点击时，他们是否会跟随新页面的链接，或者您是否有一些JavaScript捕捉点击并发送后台请求？ – Dancrumb 2010-12-16 16:43:34

@Dancrumb - 一个'href'也可以'#id'; – 2010-12-16 16:45:46

最有效的办法是通过.delegate()，像这样：

$("ul").delegate("li", "click", function() { 
    $(this).addClass("active").siblings().removeClass("active"); 
});

然后，只需给它一些造型相匹配，例如：

.active a { color: red; }

You can test it out here，如果你想要点击已激活的<li>以使其处于不活动状态，请将.addClass()更改为.toggleClass(),like this。

来源

2010-12-16 16:44:07

很不错，但是你并没有真正解释如何使用它，就像使用'onLoad'或'$（document）.ready（）'（所以给charliegriefer +1） – JohnB 2010-12-16 18:03:10

好的答案，但对于jQuery版本超过1.7可以使用简单的.on（）代替.delegate（） $（elements）.on（events，selector，data，handler）; – user3172663 2015-07-24 12:00:19

您没有提供很多去，但假设这是页面上的唯一无序列表...

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('ul li').click(function() { 
      $('ul li').removeClass('highlight'); 
      $(this).addClass('highlight'); 
     }); 
    }); 
</script>

因此，任何丽被点击的情况下，“亮点”类（假设有是你所说的突出部分）从所有李元素中移除。然后，触发点击的人将获得高亮级别。

可能会更好地让'a'元素实际触发jquery，现在我想到了它。

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('ul li a').click(function() { 
      $('ul li').removeClass('highlight'); 
      $(this).parent('li').addClass('highlight'); 
     }); 
    }); 
</script>

这是我可以做的最好的给你提供的信息。

来源

2010-12-16 16:47:35 charliegriefer

的jQuery/JavaScript的 - 高亮的菜单时，它的用户点击

回答

相关问题