Question

我有一个简单的问题，我不知道如何处理它，因为我正在学习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>

我真的很感激你的帮助和努力！

Answer 1

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

＆＃13;

// 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');
  });
});

＆＃13;

#page2,
#page3 {
  display: none;
}

＆＃13;

<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>

＆＃13;

在JavaScript上淡出当前和淡入锚点

1 个答案: