Question

这是我导航的标记：

<div class="navigation navigation-fixed-top">
<a href="#home" class="active">Home</a>
<a href="#about">About</a>
</div>

我有这个jquery脚本，它检查href="#home"是否有类活动来执行某些操作，如果不执行其他操作。

这是代码：

var isActive = $('a[href="#home"]').hasClass('active');
$(".navigation")
.toggleClass("navigation-fixed-bottom", isActive)
.toggleClass("navigation-fixed-top", !isActive);

这部分有效，因为当我去#about部分或点击它时会自动添加class="active"。它在没有刷新页面的情况下执行此操作，因此我需要一种方法来在不刷新页面的情况下完成此工作。

有关如何使用jQuery / Javascript执行此操作的任何建议？

更新：这是插件Scrollit.js的名称这是负责在导航元素上添加活动类的代码：

(function($) {
'use strict';

var pluginName = 'ScrollIt',
    pluginVersion = '1.0.3';

/*
 * OPTIONS
 */
var defaults = {
    upKey: 38,
    downKey: 40,
    easing: 'linear',
    scrollTime: 600,
    activeClass: 'active',
    onPageChange: null,
    topOffset : 0
};

$.scrollIt = function(options) {

    /*
     * DECLARATIONS
     */
    var settings = $.extend(defaults, options),
        active = 0,
        lastIndex = $('[data-scroll-index]:last').attr('data-scroll-index');

    /*
     * METHODS
     */

    /**
     * navigate
     *
     * sets up navigation animation
     */
    var navigate = function(ndx) {
        if(ndx < 0 || ndx > lastIndex) return;

        var targetTop = $('[data-scroll-index=' + ndx + ']').offset().top + settings.topOffset + 1;
        $('html,body').animate({
            scrollTop: targetTop,
            easing: settings.easing
        }, settings.scrollTime);
    };

    /**
     * doScroll
     *
     * runs navigation() when criteria are met
     */
    var doScroll = function (e) {
        var target = $(e.target).closest("[data-scroll-nav]").attr('data-scroll-nav') ||
        $(e.target).closest("[data-scroll-goto]").attr('data-scroll-goto');
        navigate(parseInt(target));
    };

    /**
     * keyNavigation
     *
     * sets up keyboard navigation behavior
     */
    var keyNavigation = function (e) {
        var key = e.which;
        if(key == settings.upKey && active > 0) {
            navigate(parseInt(active) - 1);
            return false;
        } else if(key == settings.downKey && active < lastIndex) {
            navigate(parseInt(active) + 1);
            return false;
        }
        return true;
    };

    /**
     * updateActive
     *
     * sets the currently active item
     */
    var updateActive = function(ndx) {
        if(settings.onPageChange && ndx && (active != ndx)) settings.onPageChange(ndx);

        active = ndx;
        $('[data-scroll-nav]').removeClass(settings.activeClass);
        $('[data-scroll-nav=' + ndx + ']').addClass(settings.activeClass);
    };

    /**
     * watchActive
     *
     * watches currently active item and updates accordingly
     */
    function navPosition() {
    $('[data-scroll-nav]').toggleClass('navigation-fixed-bottom navigation-fixed-top');
    }
    var updateActive = function(ndx, navPosition) {
    var watchActive = function() {
        var winTop = $(window).scrollTop();

        var visible = $('[data-scroll-index]').filter(function(ndx, div) {
            return winTop >= $(div).offset().top + settings.topOffset &&
            winTop < $(div).offset().top + (settings.topOffset) + $(div).outerHeight()
        });
        var newActive = visible.first().attr('data-scroll-index');
        updateActive(newActive);
    };

    /*
     * runs methods
     */
    $(window).on('scroll',watchActive).on('scroll');

    $(window).on('keydown', keyNavigation);

    $('body').on('click','[data-scroll-nav], [data-scroll-goto]', function(e){
        e.preventDefault();
        doScroll(e);
    });

};
}(jQuery));

Answer 1

$('[data-scroll-nav]').removeClass(settings.activeClass)
    .toggleClass('navigation-fixed-bottom navigation-fixed-top');

和/或

$('[data-scroll-nav=' + ndx + ']').addClass(settings.activeClass)
    .toggleClass('navigation-fixed-bottom navigation-fixed-top');

如果您想保持原始代码更清晰，可以进行回调：

function myCallBackFunction() {
    $('[data-scroll-nav]').toggleClass('navigation-fixed-bottom navigation-fixed-top');
}
var updateActive = function(ndx, myCallbackFunction) {..}

Answer 2

使用jquery将处理程序绑定到要响应的事件 $("a.active").on('click',function(){});

每次类更改时，jquery都会调用一个函数

2 个答案: