如何用jQuery实现点击链接按钮后的延迟元素切换显示

嘿，刚接触HTML和JavaScript就能动手搭个人网站，真的很棒！针对你的需求，我用你正在用的jQuery 1.10.2写了一套完整的实现方案，完全贴合你要的「初始仅显示第一个按钮→点击后隐藏它并显示10秒提示→最后显示第二个按钮」的流程。

完整代码示例 #

首先我们需要调整一下HTML结构，新增一个用来显示"Checking..."的提示元素，同时用CSS初始隐藏不需要一开始显示的内容：

<!-- 初始仅显示第一个按钮 -->
<a id="first" href="http://example.com/first-link" target="_blank">
  <button class="btn-icon btn-icon-check">First Link</button>
</a>

<!-- 初始隐藏的提示信息 -->
<div id="checking" style="display: none; margin: 10px 0;">Checking...</div>

<!-- 初始隐藏的第二个按钮 -->
<a id="second" href="http://example.com/second-link" target="_blank" style="display: none;">
  <button class="btn-icon btn-icon-go">Second Link</button>
</a>

<script src="jquery-1.10.2.js"></script>
<script>
$(document).ready(function() {
  // 给第一个按钮绑定点击事件
  $('#first').on('click', function(e) {
    // 如果你希望点击第一个按钮时不跳转链接，就取消下面这行的注释
    // e.preventDefault();
    
    // 隐藏第一个按钮
    $(this).hide();
    // 显示"Checking..."提示
    $('#checking').show();
    
    // 10秒后执行后续操作
    setTimeout(function() {
      // 隐藏提示信息
      $('#checking').hide();
      // 显示第二个按钮
      $('#second').show();
    }, 10000); // 10000毫秒 = 10秒
  });
});
</script>

关键步骤解释 #

• 初始状态控制：通过style="display: none;"让第二个按钮和提示信息一开始就隐藏，只留第一个按钮可见。
• 点击事件处理：用jQuery的on('click')给第一个按钮绑定点击逻辑，点击后立刻隐藏自身并显示提示。
• 延迟执行：用setTimeout设置10秒的延迟，时间到后隐藏提示、显示第二个按钮，完全符合你要的依次显示逻辑。
• 跳转控制：如果你不希望点击第一个按钮时跳转到链接，只需要取消e.preventDefault();的注释即可，这行代码会阻止a标签的默认跳转行为。

这套代码完全兼容jQuery 1.10.2，你可以直接复制到你的项目里测试，有问题随时调整～

内容的提问来源于stack exchange，提问作者Juan Diego