如何从另一个页面调用 jQuery 事件？

Question

您好，我有一个关于标题的问题。
有 jQuery 控制的第 1 页显示 div，第 1 节和第 2 节，如下所示。

$('.section2,.click1').fadeOut(0);
$('.click2').on('click', function() {
  $(this).fadeOut(0);
  $('.section1').fadeOut();
  $('.section2, .click1').fadeIn();
});
$('.click1').on('click', function() {
  $(this).fadeOut(0);
  $('.section2').fadeOut();
  $('.section1, .click2').fadeIn();
});

a {
  display:block;
}
.section-wrapper {
  position: relative;
  width:400px;
  height: 140px;
}
.section-box {
  width: 100%;
  height: 100%;
}
.section1 {
  background: red;
}
.section2 {
  position: absolute;
  top: 0;
  left: 0;
  background: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="click2">Click to section2.</a>
<a class="click1">Click to section1.</a>
<div class="section-wrapper">
  <div class="section-box section1">
    I am section 1, default section.
  </div>
  <div class="section-box section2" id="Section2">
    I am section 2.
  </div>
</div>

但是，当我在第 2 页时，需要一个按钮将我链接到第 2 部分。

<a href="page1.html#Section2">Go to Page 1 Section 2</a>

如何调用 jquery 函数来显示第 2 部分并隐藏第 1 部分？

Answer 1

这个比较通用

$(function() {
  $('.click').on('click', function() {
    let sectionNumber = $(this).data("section");
    $(".click").show();
    $(this).fadeOut(0);
    $('.section-box').not(".section"+sectionNumber).fadeOut();
    $('.section'+sectionNumber).fadeIn()
  });


  let hash = "#section2" // change to location.hash when happy
  let section = hash ? hash.substring(1).replace("scrolldown&","") : "section1";

  if (hash) { 
    let sectionNumber = hash.replace(/\D+/,"");
    $("[data-section="+sectionNumber+"]").click()
  }  
});

a {
  display: block;
}

.section-wrapper {
  position: relative;
  width: 400px;
  height: 140px;
}

.section-box {
  width: 100%;
  height: 100%;
}

.section1 {
  background: red;
}

.section2 {
  position: absolute;
  top: 0;
  left: 0;
  background: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="click" data-section="2">Click to section 2.</a>
<a class="click" data-section="1">Click to section 1.</a>
<div class="section-wrapper">
  <div class="section-box section1">
    I am section 1, default section.
  </div>
  <div class="section-box section2" id="Section2">
    I am section 2.
  </div>
</div>

Answer 2

您可以检查页面 url 中的哈希标记并显示/隐藏元素。

编辑

$(document).ready(function(){
  if(window.location.hash) {
   var hashVal = window.location.hash.substring(1);
   if(hashVal == "Section2"){
     var divId = "#"+hashVal; //id of the section 2 element

     $('.section1').fadeOut();
     $('.section2, .click1').fadeIn();

     var pos = $(divId).offset().top; //top position relative to the document
     $('body, html').animate({scrollTop: pos}); 

   }    
  } else {
  // No hash value
  }
});