在a标签点击后会有短暂的动画效果, 类似 loading, 动画结束后再跳转页面, 有什么方法能实现这样的功能?

a标签点击后, 停留一秒后再跳转页面?

发布于
2023-04-19 四川

✓ 已被采纳

如楼上所说，只能js劫持一下点击事件

<a href="https://www.baidu.com" target="_blank" onclick="onLinkClick" >这是个链接</a>

<script>
  const onLinkClick = function(e) {
    // 阻止默认跳转行为
    e.preventDefault();
    // 设置loading
    // ...
    const href = e.target.getAttribute('href');
    const openType = e.target.getAttribute('target');
    // 1秒后跳转
    setTimeout(() => {
      window.open(href, openType);
    }, 1000);
  }
</script>

陟上晴明

21.4k144991

发布于
2023-04-19 浙江

比如说劫持 or 不使用 <a> 标签默认通过 href 的跳转，通过JS控制跳转即可。

我是好人

2.2k1619

发布于
2023-04-23 安徽

提供一个js的思路，动画就自己写吧。

const el = document.querySelector('a')
el.addEventListener('click', function(e){
  if(e.isTrusted){
    e.preventDefault();
    setTimeout(()=> this.click(), 1000)
  }
})

玛拉_以琳

8.7k41542

发布于
2023-04-19 上海

更新于
2023-04-19

用其他标签写一个按钮注册click，在click事件里加上1秒钟定时器就可以

<button id="myButton">Click me</button>

<script>
  const button = document.querySelector('#myButton');
  button.addEventListener('click', () => {
    setTimeout(() => {
      console.log('1 秒钟的定时器已经结束了');
    }, 1000);
  });
</script>

还方便

_XYZ111

492253176

发布于
2023-04-19 上海

更新于
2023-04-19

补充一个

$('a').click(function() {
  // ... 停留期间需要执行的函数 ...
  setTimeout(function() {
      location.href = $(this).attr('href');
  }, 1000)
  return false;
})

迎旭科技工作室

524

发布于
2023-04-23 河北

更新于
2023-04-23

要实现在点击标签后显示短暂的加载动画，然后再跳转到另一个页面，你可以使用 JavaScript（或 jQuery）和 CSS 来实现这个功能。

首先，创建一个简单的加载动画效果：

<!DOCTYPE html>
<html lang="zh-CN">
<head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>带有加载动画的跳转</title>
<style>
    .loader {
        border: 5px solid #f3f3f3;
        border-top: 5px solid #3498db;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        animation: spin 2s linear infinite;
        display: none;
    }

    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
</style>

</head>
<body>

<a href="https://www.example.com" id="myLink">点击这里跳转</a>
<div class="loader" id="loader"></div>

<script>
    const myLink = document.getElementById('myLink');
    const loader = document.getElementById('loader');

    myLink.addEventListener('click', (e) => {
        e.preventDefault(); // 阻止<a>标签的默认行为
        loader.style.display = 'inline-block'; // 显示加载动画

        setTimeout(() => {
            window.location.href = myLink.href; // 在动画结束后跳转到目标页面
        }, 2000); // 设置动画持续时间，例如这里设置为 2 秒
    });
</script>

</body>
</html>
在这个例子中，使用 CSS 创建一个简单的加载动画。然后，使用 JavaScript 监听标签的点击事件。当用户点击链接时，我们阻止默认的跳转行为，显示加载动画，然后在指定的时间（例如 2 秒）后跳转到目标页面。

你可以根据需要自定义动画效果和持续时间。如果你熟悉 jQuery，也可以使用 jQuery 实现相同的功能。
您可以使用以下代码：

首先，确保在您的HTML文件中引入jQuery库。在这个例子中，使用一个简单的淡入淡出效果作为加载动画。

<!DOCTYPE html>
<html lang="zh-CN">
<head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>带有加载动画的跳转 - jQuery</title>
<style>
    #loader {
        width: 40px;
        height: 40px;
        background-color: #3498db;
        display: none;
        opacity: 0;
    }
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

</head>
<body>

<a href="https://www.example.com" id="myLink">点击这里跳转</a>
<div id="loader"></div>

<script>
    $(document).ready(function () {
        const myLink = $('#myLink');
        const loader = $('#loader');

        myLink.on('click', function (e) {
            e.preventDefault(); // 阻止<a>标签的默认行为

            loader.fadeIn(500, function () { // 使用淡入效果显示加载动画
                setTimeout(function () {
                    loader.fadeOut(500, function () { // 使用淡出效果隐藏加载动画
                        window.location.href = myLink.attr('href'); // 在动画结束后跳转到目标页面
                    });
                }, 2000); // 设置动画持续时间，例如这里设置为 2 秒
            });
        });
    });
</script>

</body>
</html>
在这个例子中，使用了jQuery的fadeIn()和fadeOut()函数来创建一个淡入淡出的加载动画效果。我们依然使用事件监听器来监听标签的点击事件，阻止默认的跳转行为，然后在指定的时间后跳转到目标页面。这里的动画效果和持续时间也可以根据需要进行自定义。

无论选择使用原生JavaScript还是jQuery，关键是使用事件监听器来捕获标签的点击事件，阻止其默认行为，然后在适当的时机执行页面跳转。
想接单找我

柯楠

1.3k41326

发布于
2023-04-23 广东

有两种办法可以实现点击停留一秒后再跳转页面的效果：

阻止a标签点击事件的默认跳转行为，加入定时器延时一秒后再手动跳转：

<a href="https://segmentfault.com" id="link">链接</a>

var link = document.getElementById("link");
link.addEventListener("click", function(e) {
 e.preventDefault();
 setTimeout(function() {
     window.open(e.target.href);
 }, 1000);
});

用其他行内标签结合css样式来模拟a标签的行为：

<span id="link">链接</span>

#link {
 color: blue;
 cursor: pointer;
 text-decoration: underline;
}
.active {
 color: red !important;
}

var link = document.getElementById("link");
link.addEventListener("mousedown", function(e) {
 e.target.classList.add("active");
 document.addEventListener("mouseup", function mouseup() {
     e.target.classList.remove("active");
     document.removeEventListener("mouseup", mouseup);
 });
});
link.addEventListener("click", function(e) {
 setTimeout(function() {
     window.open("https://segmentfault.com");
     e.target.style.color = "purple";
 }, 1000);
});

a标签点击后, 停留一秒后再跳转页面?

有两种办法可以实现点击停留一秒后再跳转页面的效果：

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

为什么在谷歌浏览器中 'a' == ['a'] 返回 true？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

纯css如何绘制一个无背景色有边框色，带有文字的倒等腰梯形？

css布局怎么保证右边一直在可视范围内？