基于if语句的点击链接的href

Question

我是stackoverflow的新手，并且对以下代码有疑问：

JavaScript：

$(window).load(function() {
    "use strict";

    setTimeout(function() {
        $('#preloader').velocity({

            opacity: "0",

            complete: function() {
                $("#loading").velocity("fadeOut", {
                    duration: 1000,
                    easing: [0.7, 0, 0.3, 1],
                });
                $('body').addClass('loaded');   
                setTimeout(function() {
                   //Init waterpipe
                     var smokyBG = $('#canvas').waterpipe();
                }, 1000);
            }
        });
    }, 1000);
    setTimeout(function() {
        $(".link.left").css("left", "0px");
        $(".link.left1").css("left", "0px");
        $(".link.left2").css("left", "0px");
        $(".link.right").css("right", "0px");
        setTimeout(function() {
            $('.hero-text').each(function(i) {
                (function(object) {
                    setTimeout(function() {
                        $(object).addClass('fadeInDown').removeClass('opacity-0');
                    }, (i * 300) + 300);
                })(this);
            });
        }, 1200);
    }, 1000);


})


$(document).ready(function() {
    "use strict";

    /* ------------------------------------- */
    /* 2. Page Reveal Effect ............... */
    /* ------------------------------------- */
    var ifTouchDevices = navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry|Windows Phone)/);

    var revealerOpts = {
        nmbLayers: 3,
        bgcolor: ['#f5f5f5', '#33CCFF', '#323232'],
        effect: 'open-effect',
        onStart: function(direction) {
            if (direction === 'left') $("#about, #team").addClass('animate-' + direction); 
            else if (direction === 'right') $("#contact").addClass('animate-' + direction);


        },
        onEnd: function(direction) {
            $("#about").removeClass("animate-left");
            $("#team").removeClass("animate-left");
            $("#contact").removeClass("animate-right");
            if (isDesktop()) $(".service-header").addClass("opacity-0");
        }
    };
    var revealer = new Revealer(revealerOpts);

    function isDesktop() {
        if ($(window).width() >= 1000) return true;
        else return false;
    }

function reveal(direction) {
  var callbackTime = 750,
    callbackFn = function() {
      if (direction === 'left') {
        setTimeout(function() {
          $("#about").addClass("active");
          setTimeout(function() {
            $("#about").removeClass('in');
            setTimeout(function() {
              scrollbar('.about_content');
            }, 1000);
          }, 1200);
        }, 1000);
      } else if (direction === 'right') {
        setTimeout(function() {
          $("#contact").addClass("active");
          setTimeout(function() {
            $("#contact").removeClass('in');
            setTimeout(function() {
              scrollbar('.contact_content');
            }, 1000);
          }, 1200);
        }, 1000);

      }

revealer.reveal(direction, callbackTime, callbackFn);
    }

    /* ------------------------------------- */
    /* 3. Action Buttons ................... */
    /* ------------------------------------- */

    $('.link a').on( "click", function() {

        if (!isDesktop()) return;
        $("section.active").removeClass("active");
        $("#about").removeClass("active");
        $("#contact").removeClass("active");
        $("#team").removeClass("active");
        if (!$("#about").hasClass("in")) {
            $("#about").addClass("in");
        }
        if (!$("#contact").hasClass("in")) {
            $("#contact").addClass("in");
        }
        if (!$("#team").hasClass("in")) {
            $("#team").addClass("in");
        }

        var target = $(this).attr('href');
        reveal($(target).attr('data-direction'));
        return false;
    });
    /* Close Button */
    $('.btn-close').on( "click", function() {
        closeContent($(this).attr('href'));
        return false;
    });

    function closeContent(_target) {
        $(_target).addClass('out');
        setTimeout((function() {
            $(_target).removeClass('active out');
            $(_target).addClass('in');
            $('.hero-text').addClass('opacity-0');
            $('.hero-text').removeClass('fadeInDown');
            $("#body-container").addClass('active');
        }), 2200);
        setTimeout(function() {
            $('.hero-text').each(function(i) {
                (function(self) {
                    setTimeout(function() {
                        $(self).addClass('fadeInDown').removeClass('opacity-0');
                    }, (i * 300) + 300);
                })(this);
            });
        }, 3000);
    }

HTML：

<div class="link left">
  <div class="link-box"> <a class="link-box-left" href="#about" title="About Us">
      <p class="lmenu">ABOUT US</p>
    </a>
    <div class="lmenu-line-box">
      <div class="lmenu-line-mask">
        <div class="lmenu-line"></div>
      </div>
    </div>
  </div>
</div> <a class="link-background left" href="#"></a> The section HTML: <section id="about" class="page-inner" data-direction="left">

在网站上，内部链接正在处理动画，并且href不会成为网址的一部分。

直到现在，页面上只有两个链接（左侧和右侧），但是现在我想在左侧具有多个链接，这就是为什么我想将if条件从“ direction”更改为单击链接的href。有什么办法可以做到吗？

非常感谢！

Answer 1

在我看来，您可以在JavaScript的“操作按钮”部分中更改一行代码。将reveal($(target).attr('data-direction'));更改为reveal(target);。要做的是将href交给reveal函数，而不是指导。这是因为target已经是href。这是代码的更新部分：

/* ------------------------------------- */
/* 3. Action Buttons ................... */
/* ------------------------------------- */

$('.link a').on( "click", function() {

    if (!isDesktop()) return;
    $("section.active").removeClass("active");
    $("#about").removeClass("active");
    $("#contact").removeClass("active");
    $("#team").removeClass("active");
    if (!$("#about").hasClass("in")) {
        $("#about").addClass("in");
    }
    if (!$("#contact").hasClass("in")) {
        $("#contact").addClass("in");
    }
    if (!$("#team").hasClass("in")) {
        $("#team").addClass("in");
    }

    var target = $(this).attr('href');
    reveal(target);
    return false;
});