Question

我想在页面菜单上添加一个活动类。因此，它不是具有不同页面的默认菜单，而只是同一页面上的链接。如何在最后点击的菜单项中添加一个类？

这是一个小提琴：http://jsfiddle.net/arvanderkamp/KUfxF/

到目前为止我的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();
        }
    })
});

非常感谢！

Answer 1

像这样使用

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

Demo

您可以使用.addClass()添加活动类。

$(".active").removeClass("active");此行将从所有元素中删除类active。

在每次点击事件代码中使用这两行。

Answer 2

在你的每个职能中，这样的事情怎么样？

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

<强> Working Demo

Answer 3

$(function() {
    $(".elevator a").click(function(evt) {
        evt.preventDefault();
$(".elevator a").removeClass();
$(this).addClass('active');
    });
});

Answer 4

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

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

更多信息： -

http://api.jquery.com/addclass/

https://api.jquery.com/removeClass/

Answer 5

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

向其添加新类

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

Answer 6

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

 $(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();
        }
    })
});

小提琴here

将当前类添加到页面菜单上

6 个答案: