时间戳

首页 > 解决方案 > 延迟然后触发一个新页面

jquery - 延迟然后触发一个新页面

问题描述

我有一个带有 href 链接的标准导航，当用户单击这些链接时，我希望它在 1 秒后触发，因为我想在将它们引导到新页面之前做一个动画。

我可以延迟然后将用户触发到页面，但这只是方向上的硬编码，但会有很多链接。

            <ul>
                <li><a href="/health-and-care/" class="introduction">Introduction</a></li>
                <li><a href="/health-and-care/agenda" class="agenda">Speakers, Agenda & Venue</a></li>
                <li><a href="/health-and-care/about" class="about">About InterSystems</a></li>
                <li class="nolive"><a href="#" class="register-nav"><i class="fas fa-clipboard-check"></i> Register</a></li>
            </ul>

jQuery

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

       setTimeout(function () {
           window.location.href = "blog.html";
        }, 2000);

    });

标签： jqueryhtmlcss

解决方案

您可以像这样重定向到位置dynamically：

$('a').click (function (e) {
   e.preventDefault();
   let url = $(this).attr('href');
   setTimeout(function () {
       window.location.href = url;
    }, 2000);

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
    <li><a href="/health-and-care/" class="introduction">Introduction</a></li>
    <li><a href="/health-and-care/agenda" class="agenda">Speakers, Agenda & Venue</a></li>
    <li><a href="/health-and-care/about" class="about">About InterSystems</a></li>
    <li class="nolive"><a href="#" class="register-nav"><i class="fas fa-clipboard-check"></i> Register</a></li>
</ul>

推荐阅读