单击时向超链接添加活动状态

我在尝试向链接添加活动状态时遇到了一些麻烦。 这是我正在玩的代码：

$(function () { $('a').click(function () { $(this).addClass('PnavCurrent'); //$("div a").removeClass("PnavCurrent"); //$("div a[href="+newHash+"]").addClass("PnavCurrent"); $(this).removeClass('PnavCurrent'); $(this).css('color', '#51ad9d'); $(this).css('z-index', '2'); $(this).css('border-color', '#00a8ff'); $('a').hover($(this).css('z-index', '10')); }); }); 

由于某种原因，它不会为链接应用css活动状态类（’PnavCurrent’），但是当我在脚本代码中使用{$(this).css...}指定它时，它确实可以正常工作。 现在我想要的是为脚本代码中的链接添加hover状态z-index，如下所示：

  $('a').hover($(this).css ('z-index', '10')); 

我尝试使用上面的一小段代码来尝试实现这一点，但它不起作用。 如果有人能帮助解决这个问题并且可能是一个更好的解决方案，我将不胜感激。

Answer 1

CSS：

 .PnavCurrent { color: #51ad9d; z-index: 2; border-color: #00a8ff; } .PnavCurrent:hover { z-index: 10; } 

使用Javascript：

 $(function() { $('a').click(function(e) { // you usually want to prevent default for handling link clicks, // otherwise the browser follows the href (if that's intended skip this) e.preventDefault(); $('a').not(this).removeClass('PnavCurrent'); $(this).addClass('PnavCurrent'); }); }); 

---

关于jQuery .hover()注意事项：你.hover()就不需要这个，但是用法就是这个（这是css的替代方法 :hover规则，不能一起使用）

 $("a").hover( function () { $(this).css('z-index',2)); }, function () { $(this).css('z-index', 10); } );