javascript - 如何关闭灯箱并转到一个 href 中底层页面上的#id

Question

我有一个页面底部有一个联系部分(id:#contact)。在同一页面上，我使用灯箱来显示某些图像的放大版本。单击以下按钮可以滚动到联系人部分(显示:

       <a href="#img3"><img src="img/event/bbq3small.jpg"></a>
       <div class="lightbox" id="img3">
        <figure><img src="img/event/bbq3.jpg" alt="医王山でバーベキューパーティー">
        <a href="#img4"><i class="fa fa-chevron-right fa-lg next"></i></a>
        <a href="#img2"><i class="fa fa-chevron-left fa-lg previous"></i></a>
        <a href="#_"><i class="fa fa-times fa-lg exit"></i></a>
        <figcaption>医王山でバーベキューパーティー</figcaption>
        </figure>
       </div>

     <!-- Contact Button -->
           <div class="scroll-contact d-block">
           <a class="btn btn-contact js-scroll-trigger" href="#contact">
            <i class="fa fa-envelope-o"></i>
           </a>
           </div>

    .scroll-contact {
      position: fixed;
      z-index: 1049;
      right: 2%;
      bottom: 2%;
      width: 50px;
      height: 50px; }
      .scroll-contact .btn {
        font-size: 18px;
        line-height: 28px;
        width: 50px;
        height: 50px;
        text-align: center;
        border-radius: 100%; }
        .scroll-contact .btn:focus {
          outline: none; }

.lightbox {
      display: none;
      position: fixed;
      z-index: 999;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background: rgba(0, 0, 0, 0.8);}

    .lightbox figure {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width:90%;
        max-width: 500px;}

    .lightbox img {
        width:100%;
        max-height: 500px;}

    .lightbox figcaption {
        bottom:0;
        position:absolute;
        color:white;
        font-size: 14px;
        width: 100%;
        text-align: right;
        padding-right: 5px;
        background: rgba(0, 0, 0, 0.5);}

    .next {
        position: absolute;
        top: 50%;
        right: 2%;
        opacity: 0.9;
        color: white;}

    .previous { 
        position: absolute;
        top: 50%;
        left: 2%;
        opacity: 0.9;
        color: white;}

    .exit {
        position: absolute;
        top:2%;
        right:2%;
        color:white;}

    .lightbox:target {
        outline: none;
        display: block;}

即使显示灯箱，此按钮仍然可见。我怎样才能通过单击联系人按钮关闭灯箱并滚动到联系人部分？我正在使用 #_ 命令关闭灯箱，但我不知道如何通过一个按钮同时执行这两项操作。

抱歉，我应该补充说我有一个 javascript 文件。不管怎样，我合并了你制作的代码(在文件的底部)。非常感谢。它有效，但它已经杀死了平滑滚动功能。如何将它包含在您的函数中？

(function($) {
  "use strict"; // Start of use strict

  // Smooth scrolling using jQuery easing
  $('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function() {
    if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
      if (target.length) {
        $('html, body').animate({
          scrollTop: (target.offset().top - 48)
        }, 1000, "easeInOutExpo");
        return false;
      }
    }
  });

  // Closes responsive menu when a scroll trigger link is clicked
  $('.js-scroll-trigger').click(function() {
    $('.navbar-collapse').collapse('hide');
  });

  // Activate scrollspy to add active class to navbar items on scroll
  $('body').scrollspy({
    target: '#mainNav',
    offset: 54
  });

  // Collapse the navbar when page is scrolled
  $(window).scroll(function() {
    if ($("#mainNav").offset().top > 100) {
      $("#mainNav").addClass("navbar-shrink");
    } else {
      $("#mainNav").removeClass("navbar-shrink");
    }
  });

  // Floating label headings for the contact form
  $(function() {
    $("body").on("input propertychange", ".floating-label-form-group", function(e) {
      $(this).toggleClass("floating-label-form-group-with-value", !!$(e.target).val());
    }).on("focus", ".floating-label-form-group", function() {
      $(this).addClass("floating-label-form-group-with-focus");
    }).on("blur", ".floating-label-form-group", function() {
      $(this).removeClass("floating-label-form-group-with-focus");
    });
  });

})(jQuery); // End of use strict

function processAction(hideElemId, navElemId)
    {
        var elemToHide = null;

        try
        {
            // Hide the element with the specified id
            elemToHide = document.getElementById(hideElemId);
            elemToHide.setAttribute("style", "display:none"); 
            // Or alternatively, elemToHide.className = "(some class that hides element)";

            // Navigate to the element with specified id
            window.location.hash = navElemId;

        }
        catch(e)
        {
            alert("processAction Error:  " + e.Message);
        }
        finally
        {

        }

    }

Answer 1

您可以添加一个 javascript 函数，当使用类似

的方法单击“联系”按钮时调用该函数

href="javascript: processAction('(hideElementId)','(navToElementId)')"

<script type="text/javascript" language="javascript">

    function processAction(hideElemId, navElemId)
    {
        var elemToHide = null;

        try
        {
            // Hide the element with the specified id
            elemToHide = document.getElementById(hideElemId);
            elemToHide.setAttribute("style", "display:none"); 
            // Or alternatively, elemToHide.className = "(some class that hides element)";

            // Navigate to the element with specified id
            window.location.hash = navElemId;

        }
        catch(e)
        {
            alert("processAction Error:  " + e.Message);
        }
        finally
        {

        }

    }
</script>