Question

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

抱歉，我没有提供HTML。你可以在这里看到它：http://oursaviorschurch.com/GivingNew。我正在使用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');
        };
    });
});

Answer 1

根据你的说法，你想要以下......

当它们悬停在菜单上时，所选的课程就会消失。但如果他们从菜单中删除鼠标，我需要重新出现所选的类。

为什么用户不关注添加selected的菜单并在聚焦时将其删除？

你可以这样做：
检查toggleClass。

$(function () {

    $('.sideNav').on('mouseout mouseover', function() {
        $(this).toggleClass('selected');
    });

});

<强> Example

Answer 2

假设加价类似于以下内容：

<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>

请注意，我在class元素上使用特定的a来指定我想要搜索的内容，还我正在使用的文本要搜索a字符串的window.location元素，可能需要根据您自己的标记和逻辑进行调整。

以下jQuery在这些假设下工作：

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');
    }
});

JS Fiddle demo

参考文献：

jQuery的：
- addClass()。
- attr()。
- has-attribute-selector [attribute]。
- each()。
- find()。
- on()。
- removeClass()。
- text()。
JavaScript的：
- e.type。
- indexOf()。
- split()。
- toLowerCase()。

Answer 3

如果我正确理解你的问题，我会做的是用PHP添加“selected”标签到当前页面，用jQuery和CSS添加样式/效果。

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

此外，由于您总是在测试'loc'var“test（loc）”，而不是使用多个if，您可以使用'switch'。

基于url添加类并在mouseover上删除

3 个答案: