How to jump to the page with jquery-JS Tutorial-php.cn

How to jump to the page with jquery

藏色散人

Release： 2022-12-30 11:13:04

Original

21743 people have browsed it

The jquery method to jump to a page: first introduce the jquery file into the page; then create a button to trigger the jump; then add a click event for the jump button; finally operate the location object through jquery, and Call the attr method and assign the href attribute to the new url address.

Operating environment: Acer S40-51, Windows10 Home Chinese version, jquery1.8.3&&HBuilderX.3.0.5

Recommendation: "jquery video Tutorial》

jquery jump page

First, you need to introduce the script library file into the page.

How to jump to the page with jquery

Then create an html sample file test, and create a button to trigger the jump. Note that the current page is called 'Page A'. Then write JS script logic to add a click event for the jump button. We know that in native js, we use the location attribute in the window object to handle jumps. window.location.href = "abc.html"

Manipulate the location object through jquery and call attr Method, just assign the href attribute to the new url address.

test complete code:

<!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>

Copy after login

Run the page and click the ‘Jump’ button above.

How to jump to the page with jquery

(Note that you are now in page A)

After clicking, you will successfully jump to the new page, (testb)

How to jump to the page with jquery

testb code such as:

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

Copy after login

For more computer programming related knowledge, please visit: Programming Teaching! !

The above is the detailed content of How to jump to the page with jquery. For more information, please follow other related articles on the PHP Chinese website!