Home > Article > Web Front-end > How to jump to the page with jquery
How to jump to the page with jquery
- 藏色散人Original
- 2021-01-29 16:36:5921793browse
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.
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>Run the page and click the ‘Jump’ button above.
(Note that you are now in page A)
After clicking, you will successfully jump to the new page, (testb)
testb code such as:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h3>这是页面B</h3>
</body>
</html>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!