0

有没有更有效的方法来做到这一点？如果用户在该页面上，基本上只需将一个类添加到 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');
        };
    });
});
4

3 回答 3

1

假设标记类似于以下内容：

<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 小提琴演示。

参考：

于 2012-07-02T21:04:08.507 回答
1

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

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

为什么不当用户关注您添加的菜单selected并在 focusout 时删除它？

你可以这样做：
检查toggleClass。

$(function () {

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

});

例子

于 2012-07-02T20:58:37.590 回答
0

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

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

此外，由于您总是针对您的 'loc' var "test(loc)" 进行测试，而不是使用多个 if，您可以使用 'switch'。

于 2012-07-02T20:41:35.553 回答