Jquery 基于url添加类并在鼠标悬停时删除

有没有更有效的方法？基本上，只要将一个类添加到subNav菜单（如果用户在该页面上）。当鼠标悬停在菜单上时，选定的类将消失。但是如果他们从菜单中滑鼠，我需要选择的类重新出现。必须有一种更有效的方法来做到这一点

对不起，我没有包括html。您可以在此处看到它的作用：。我正在用asp.net开发

$(function () {
    var loc = window.location.href; // returns the full URL
    if (/GivingNew/.test(loc)) {
        $('.SideGrace').addClass('selected');
    };
    if (/Options/.test(loc)) {
        $('.SideOptions').addClass('selected');
    };
    if (/FAQ/.test(loc)) {
        $('.SideFAQ').addClass('selected');
    };
    if (/GiveNow/.test(loc)) {
        $('.SideGive').addClass('selected');
    };
    $('.sideNav').mouseover(function () {
        $('.sideNav li a').removeClass('selected');
    });
    $('.sideNav').mouseout(function () {
        var loc = window.location.href; // returns the full URL
        if (/GivingNew/.test(loc)) {
            $('.SideGrace').addClass('selected');
        };
        if (/Options/.test(loc)) {
            $('.SideOptions').addClass('selected');
        };
        if (/FAQ/.test(loc)) {
            $('.SideFAQ').addClass('selected');
        };
        if (/GiveNow/.test(loc)) {
            $('.SideGive').addClass('selected');
        };
    });
});

---

如果我正确理解了您的问题，我会做的是使用PHP将“selected”标记添加到当前页面中，并使用jQuery和CSS将其添加到样式/效果中

我在想象，当你将鼠标悬停在你当前所在页面的链接上时，你会显示“你已经在这里了！”。在这种情况下，使用PHP打印出“selected”类似乎更符合逻辑，而完成其余的工作将很容易

---

此外，由于您总是根据“loc”var“test（loc）”进行测试，因此您可以使用“switch”，而不是使用多个if

根据您的说法，您是否想要以下内容

当鼠标悬停在菜单上时，选定的类将消失。但如果 他们从菜单中滑鼠，我需要选择的类重新出现

当用户聚焦您添加的

所选菜单时，为什么不将其移除？


您可以这样做：

检查

假设加价与以下类似：

<ul>
    <li><a class="menuLinks" href="http://example.com/home/">Home</a></li>
    <li><a class="menuLinks" href="http://example.com/about/">About</a></li>
    <li><a class="menuLinks" href="http://example.com/contact/">Contact</a></li>
    <li><a class="menuLinks" href="http://example.com/options/">Options</a></li>
</ul>​


参考资料：


jQuery：










JavaScript:






您的HTML将是。。？另外，您正在测试的RegExp字符串与您正在测试的
a
元素之间的关系是什么？您可以在此处看到它的发生：。这是右边的菜单栏，看起来很棒，虽然我不懂（这里是jQuery新手）。我明天到办公室时会测试一下。
<ul>
    <li><a class="menuLinks" href="http://example.com/home/">Home</a></li>
    <li><a class="menuLinks" href="http://example.com/about/">About</a></li>
    <li><a class="menuLinks" href="http://example.com/contact/">Contact</a></li>
    <li><a class="menuLinks" href="http://example.com/options/">Options</a></li>
</ul>​

var loc = 'http://www.example.com/options/';

$('a.menuLinks').each(

function() {
    var needle = $(this).text().toLowerCase().split(/ /)[0];
    if (loc.indexOf(needle) > -1) {
        $(this).addClass('selected');
        $(this).attr('data-selected',true);
    }
}).closest('ul').on('mouseenter mouseleave', function(e) {
    if (e.type == 'mouseenter') {
        $(this).find('.selected').removeClass('selected');
    } else if (e.type == 'mouseleave') {
        $(this).find('a[data-selected]').addClass('selected');
    }
});​