A 태그에 애니메이션로드를 추가하는 방법을 클릭 한 다음 점프합니까?

향상된 사용자 경험 : 태그 애니메이션 및 페이지 점프를 클릭하십시오.

사용자 경험을 향상시키기 위해서는 먼저 A 태그를 클릭 한 후 간단한 로딩 애니메이션을 표시 한 다음 대상 페이지로 이동해야합니다. 이 기사에서는 JavaScript를 사용 하여이 기능을 구현하는 방법을 소개합니다.

사용자 요구 사항 : A 태그를 클릭 한 후 애니메이션 효과를로드 한 다음 애니메이션이 끝난 후 페이지로 이동하십시오.

간단히 HTML 사용<a></a> 태그는이 기능을 구현할 수 없으므로 페이지 리디렉션 타이밍을 제어하려면 JavaScript가 필요합니다. JavaScript를 사용하여 태그의 클릭 이벤트를 가로 채어이 효과를 달성합니다.

솔루션 : onclick 이벤트 핸들러 ( e.preventDefault() )을 통해 태그의 기본 점프 동작을 가로 채고 (여기서 애니메이션 구현의 누락을 나타내는 "..."가로드 된 애니메이션을 실행하고, setTimeout 함수를 사용하여 지정된 시간 (예제 1 초)을 사용하여 window.open() 메소드를 사용합니다.

Code example:

 <a href="https://www.php.cn/link/15ea43997c9e00317564201ca5267210" onclick="onLinkClick(event)" target="_blank">점프하려면 클릭하십시오</a>

<script>
  const onLinkClick = function(e) {
    // 阻止默认跳转
    e.preventDefault();
    // 显示加载动画
    // ...  (此处添加您的加载动画代码，例如显示一个加载gif或修改CSS样式)
    const href = e.target.getAttribute('href');
    const openType = e.target.getAttribute('target');
    // 1秒后跳转
    setTimeout(() => {
      window.open(href, openType);
      // 隐藏加载动画 (如果需要，在此处添加隐藏动画的代码)
    }, 1000);
  }
</script>

이 코드에서 onLinkClick 함수는 먼저 A 태그의 기본 점프 동작을 차단 한 다음로드 애니메이션을 실행합니다 (실제 상황에 따라 "..."부분을 교체해야합니다. CSS 애니메이션, JavaScript 애니메이션 라이브러리 또는 기타 방법을 사용하여 1 초 후에 대상 링크를 열 수 있습니다. target="_blank" 새 탭 페이지에서 링크가 열리도록합니다. 실제 요구에 따라 코드의 "..."부분을 교체하고 적절한로드 애니메이션 효과를 추가하십시오.

위 내용은 A 태그에 애니메이션로드를 추가하는 방법을 클릭 한 다음 점프합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!