Question

我的问题有点像this one，但不完全相同。

我有一个带有锚点的页面，例如page.html#video1。在此页面中，我具有ID为e的多个部分。 #video1，#video2。每个部分都包含一篇文章和一个显示视频的按钮。

我希望到达#video1时自动显示page.html#video1部分中的视频。 Javascript或jQuery是否可能？

<div id="video_container"></div>
<div id="video"></div>

<section id="video1">
  <p>
    article 1
  </p>
  <button class="video1">
   the button that plays the video1
  </button>
</section>

<section id="video2">
  <p>
    article 2
  </p>
  <button class="video2">
   the button that plays the video2
  </button>
</section>

$('.video1').click(function() {
  $("#video_container").html('<div id="video"><iframe id="portrait_video" class="video_fonc" src="https://www.youtube.com/embed/0itBZI6PiDc?rel=0&enablejsapi=1&version=3&playerapiid=ytplayer&autoplay=1&enablejsapi=1&modestbranding=1" frameborder="0" allowfullscreen ></iframe></div>').fadeIn(400);
  $("#video").fitVids();
});

$('.video2').click(function() {
  $("#video_container").html('<div id="video"><iframe id="portrait_video" class="video_fonc" src="https://www.youtube.com/embed/0itBZI6PiDc?rel=0&enablejsapi=1&version=3&playerapiid=ytplayer&autoplay=1&enablejsapi=1&modestbranding=1" frameborder="0" allowfullscreen ></iframe></div>').fadeIn(400);
  $("#video").fitVids();
});

这里是jsFiddle

Answer 1

您可以使用window.location.hash从URL中获取片段。在您的情况下，该值将与包含按钮的id中的section相匹配，因此您只需找到相关的button和trigger()即可单击它：

var hash = window.location.hash;
if (hash) {
  $('section#' + hash).find('button').trigger('click');
}

带锚到达页面时触发事件

1 个答案: