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

问题描述

尝试在链接中添加活动状态时遇到了一些麻烦.这是我正在使用的代码:

I am having some trouble in trying to add an active state to my links. This the code I am playing with:

$(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，如下所示:

For some reason it won't apply the css active state class ('PnavCurrent') for the links but it does work correctly when I specify it in the script code with {$(this).css...}. Now what I would like is at add an hover state z-index for the links in the script code, something like this:

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

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

I've tried to use that little block of code above in trying to achieve this but it doesn't work. I would greatly appreciate it if anyone could help with this and possibly a better solution overall.

推荐答案

CSS:

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

.PnavCurrent:hover { z-index: 10; }

JavaScript:

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规则的替代，不能一起使用)

---

Note on jQuery .hover():You dont need this here at all, but the usage would be this (this is an alternative to the css :hover rule, not used together)

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

这篇关于单击时将活动状态添加到超链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！