链接/切换类时如何防止“跳跃”？ [复制]

Question

如果我使用“#”-Link 标签，有没有办法避免“页面跳转”？我需要使用 hashchange 事件来解决问题吗？

$(function() {
  $('nav a').click(function() {
    $('.job-details').fadeOut(400);
    $('#'+$(this).data('rel')).fadeIn(400);
  });    
});

.job-details {
  position: absolute;
  top: 50px;
  width: 400px;
  height: 200px;
  padding: 0 20px;
  border: 1px solid #ddd;
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav>
  <a href="#job1" data-rel="job1">Job 1</a>
  <a href="#job2" data-rel="job2">Job 2</a>
  <a href="#job3" data-rel="job3">Job 3</a>
</nav>

<div class="job-details" id="job1">
  <p>Job 1</p>        
</div>
<div class="job-details" id="job2">
  <p>Job 2</p>        
</div>
<div class="job-details" id="job3">
  <p>Job 3</p>        
</div>

Answer 1

您需要防止使用event.preventDefault()点击链接时浏览器的默认行为

$(function() {
  $('nav a').click(function(e) {
    e.preventDefault();

    $('.job-details').fadeOut(400);
    $('#'+$(this).data('rel')).fadeIn(400);
  });    
});

.job-details {
  position: absolute;
  top: 50px;
  width: 400px;
  height: 200px;
  padding: 0 20px;
  border: 1px solid #ddd;
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav>
  <a href="#job1" data-rel="job1">Job 1</a>
  <a href="#job2" data-rel="job2">Job 2</a>
  <a href="#job3" data-rel="job3">Job 3</a>
</nav>

<div class="job-details" id="job1">
  <p>Job 1</p>        
</div>
<div class="job-details" id="job2">
  <p>Job 2</p>        
</div>
<div class="job-details" id="job3">
  <p>Job 3</p>        
</div>