淡出当前并淡入 JavaScript 上的锚点

Fade out current and fade in anchor on JavaScript

本文关键字：JavaScript 淡入 淡出      更新时间：2023-09-26

我有一个简单的问题，我不知道如何处理它，因为我正在学习JavaScript

我想做的是指向具有淡入/淡出内容的锚点的链接导航。为此，我必须使用 JavaScript 获取当前页面 ID 和锚href。

这是我到目前为止得到的：（请注意脚本中的一种简单的调用方法，我还不知道）

$(btn).click(function(e){  
    $(*/current page/*).fadeOut('slow', function(){
        $(*/destiny page/*).fadeIn('slow');
    });
});
#page2, #page3 {
  display:none;
  }
  
<div id="page1">
  Page 1 Content
  <br>
    <a href="page2" id="btn">Show Page 2 and hide this page</a>
  <br>
    <a href="page3" id="btn">Show Page 3 and hide this page</a>
</div>
<div id="page2">
  Page 2 Content
  <br>
    <a href="page1" id="btn">Show Page 1 and hide this page</a>
  <br>
    <a href="page3" id="btn">Show Page 3 and hide this page</a>
</div>
<div id="page3">
  Page 3 Content
  <br>
    <a href="page1" id="btn">Show Page 1 and hide this page</a>
  <br>
    <a href="page2" id="btn">Show Page 2 and hide this page</a>
</div>

我非常感谢您的帮助和努力！

用于引用一组元素 您需要使用 btn 作为类，id应该是唯一的，可用于引用单个元素。

// bind click event
$('.btn').click(function(e) { 
  // prevent default click event action
  e.preventDefault();
  // get id next page based on clicked element
  var next = $(this).attr('href');
  // get parent to hide and fadeout
  $(this).parent().fadeOut('slow', function() {
    // get element to show and fade in
    $('#' + next).fadeIn('slow');
  });
});
#page2,
#page3 {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="page1">
  Page 1 Content
  <br>
  <a href="page2" class="btn">Show Page 2 and hide this page</a>
  <br>
  <a href="page3" class="btn">Show Page 3 and hide this page</a>
</div>
<div id="page2">
  Page 2 Content
  <br>
  <a href="page1" class="btn">Show Page 1 and hide this page</a>
  <br>
  <a href="page3" class="btn">Show Page 3 and hide this page</a>
</div>
<div id="page3">
  Page 3 Content
  <br>
  <a href="page1" class="btn">Show Page 1 and hide this page</a>
  <br>
  <a href="page2" class="btn">Show Page 2 and hide this page</a>
</div>

相关文章：