>웹 프론트엔드 >JS 튜토리얼 >Jquery를 사용하여 페이지로 이동하는 방법

Jquery를 사용하여 페이지로 이동하는 방법

藏色散人
藏色散人원래의
2021-01-29 16:36:5921846검색

jquery를 사용하여 페이지로 이동하는 방법: 먼저 jquery 파일을 페이지에 삽입한 다음 점프를 트리거하는 버튼을 만든 다음 점프 버튼에 대한 클릭 이벤트를 추가하고 마지막으로 jquery를 통해 위치 개체를 호출합니다. 방법을 사용하면 새 URL 주소에 href 속성을 할당하기만 하면 됩니다.

운영 환경: Acer S40-51, Windows 10 Home 중국어 버전, jquery1.8.3&&HBuilder 먼저 페이지에 스크립트 라이브러리 파일을 소개합니다.

그런 다음 HTML 샘플 파일 테스트를 만들고 점프를 트리거하는 버튼을 만듭니다. 현재 페이지는 '페이지 A'입니다. 그런 다음 JS 스크립트 로직을 작성하여 점프 버튼에 대한 클릭 이벤트를 추가합니다. 우리는 네이티브 js에서 점프를 처리하기 위해 window 객체의 위치 속성을 사용한다는 것을 알고 있습니다. 새 URL 주소에 속성 값을 할당합니다.

테스트 완료 코드:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
<h3>这是页面A</h3>
<div>
    <input class="btn btn-primary" type="button" value="跳转">
</div>
<script>
    $(document).ready(function () {
        $(".btn").click(function () {
            $(location).attr("href","testb.html")
        })
        
    })
</script>
</body>
</html>

페이지를 실행하고 위의 '점프' 버튼을 클릭하세요.

Jquery를 사용하여 페이지로 이동하는 방법

(현재 페이지 A에 있습니다.)

클릭하면 새 페이지로 성공적으로 이동합니다. (testb)

testb 코드:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h3>这是页面B</h3>
</body>
</html>

더 많은 컴퓨터 프로그래밍 관련 지식이 있으시면 Jquery를 사용하여 페이지로 이동하는 방법프로그래밍 교육

을 방문해 주세요! !

위 내용은 Jquery를 사용하여 페이지로 이동하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.