Jquery 将当前类添加到页面菜单中

我想在页面菜单中添加一个活动类。因此，它不是一个包含不同页面的默认菜单，而是同一页面上的链接。如何将类添加到上次单击的菜单项

这是一把小提琴：

到目前为止，我的javascript：

$(function() {
    $(".elevator a").click(function(evt) {
        evt.preventDefault();
    });
});        
$(document).ready(function() {
    $('a[href="#ondernemen"]').click(function() {
        $('#ondernemen').slideDown(1000);
        $('#ontdekken').slideUp(1000);
        $('#groeien').slideUp(1000);
        $('#spelen').slideUp(1000);
    });
    $('a[href="#groeien"]').click(function() {
        $('#groeien').slideDown(1000);
        $('#ontdekken').slideUp(1000);
        $('#ondernemen').slideUp(1000);
        $('#spelen').slideUp(1000);
    });
    $('a[href="#spelen"]').click(function() {
        $('#spelen').slideDown(1000);
        $('#ontdekken').slideUp(1000);
        $('#groeien').slideUp(1000);
        $('#ondernemen').slideUp(1000);
    });
    $('a[href="#ontdekken"]').click(function() {
        $('#ontdekken').slideDown(1000);
        $('#spelen').slideUp(1000);
        $('#groeien').slideUp(1000);
        $('#ondernemen').slideUp(1000);
    });
    $('body').on({
    'mousewheel': function(e) {
        if (e.target.id == 'el') return;
        e.preventDefault();
        e.stopPropagation();
        }
    })
});

非常感谢

像这样使用

  $('a[href="#ondernemen"]').click(function() {
     $(".active").removeClass("active");
     $(this).addClass("active");
    $('#ondernemen').slideDown(1000);
    $('#ontdekken').slideUp(1000);
    $('#groeien').slideUp(1000);
    $('#spelen').slideUp(1000);
});

可以使用

.addClass（）

添加活动类

$（.active”）.removeClass（“active”）此行将从所有元素中删除类
活动

在每次单击事件代码中使用这两行代码。
在每个函数中使用类似的代码怎么样

$('a[href="#ondernemen"]').click(function() {
    $('.yourClass').removeClass('yourClass');
    $(this).addClass('yourClass');

您可以添加和删除类，如下所示

$('a[href="#ondernemen"]').click(function() {
    $('.yourClass').removeClass('yourClass');
    $(this).addClass('yourClass');
    ////Your code
});

更多信息：-


通过
e.currentTarget
属性访问调用事件的dom元素，并通过
.addClass（）

只需切换所需的类，并使用事件委派来避免附加到执行相同操作的多个处理程序

 $(function() {
    $('.elevator').click(function(e) {
        var $t = $(e.target);
        if($t.is('a'))
        {
            $t.addClass('activeClass')
                .closest('div').siblings()
                   .find('a').removeClass('activeClass');
            $($t[0].hash).slideDown(1000).siblings().slideUp(1000);   
            e.preventDefault()
        }

    });
    $('body').on({
        'mousewheel': function(e) {
            if (e.target.id == 'el') return;
            e.preventDefault();
            e.stopPropagation();
        }
    })
});

Fiddle
不知道你为什么会被否决，但你的答案比我的更深入：/还有没有一种简单的方法来组合$（'ontdekken'）。slideUp（1000）$（#groeien'）。slideUp（1000）$（#spelen'）。slideUp（1000）；只添加一行代码？在单击其中一个链接之前，是否还可以向元素#ontdekken添加一个（额外）活动类？当页面加载$（'a[href=“#ontdekken”]'）.addClass（“活动”）时，将显示此元素的内容。将这一行放在$（document）.ready（谢谢，但这不起作用。当我单击其中一个links@arvanderkamp您可能弄乱了代码
：s
。我刚刚再次测试了它，电梯元素从未滑动（FF，IE，Chrome）真可惜……这样代码就轻多了
；）
是的，我认为它与我的其他代码冲突。我对jQuery的了解很差，所以我必须通过这一关（您知道是否可以添加一个（额外的）在单击其中一个链接之前，元素#ontdekken的活动类？页面加载时会显示此元素的内容。页面加载后是否要向其添加类？是的，没错！但当我单击另一个链接时，它必须消失。如果您解释它是如何工作的以及为什么是一个好链接，这会更好这是一个有用的答案。
  $('a[href="#ontdekken"]').click(function(e) {
    $('#ontdekken').slideDown(1000);
    $('#spelen').slideUp(1000);
    $('#groeien').slideUp(1000);
    $('#ondernemen').slideUp(1000);
    $(e.currentTarget).addClass("back");        
});

 $(function() {
    $('.elevator').click(function(e) {
        var $t = $(e.target);
        if($t.is('a'))
        {
            $t.addClass('activeClass')
                .closest('div').siblings()
                   .find('a').removeClass('activeClass');
            $($t[0].hash).slideDown(1000).siblings().slideUp(1000);   
            e.preventDefault()
        }

    });
    $('body').on({
        'mousewheel': function(e) {
            if (e.target.id == 'el') return;
            e.preventDefault();
            e.stopPropagation();
        }
    })
});