0

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

$(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...}. 现在我想要的是为脚本代码中的链接添加一个悬停状态 z-index，如下所示：

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

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

4

1 回答 1

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()的注意事项：你根本不需要这个，但用法是这样的（这是css规则的替代方案，不一起使用）:hover

$("a").hover(
    function () {
        $(this).css('z-index',2));
    }, 
    function () {
        $(this).css('z-index', 10);
    }
);
于 2012-07-20T01:40:17.300 回答