How to avoid jumping when clicking on a link in html

In web design, hyperlinks are often used. In hyperlinks, jump is a very common requirement. Normally, clicking a hyperlink will jump to the specified page. But in some cases, we hope that clicking a link will not jump, but only execute a script or achieve partial scrolling of the page. In this case, we need to achieve the effect of HTML not jumping. This article will explain how to implement HTML without jumping.

1. What is HTML No Jump

HTML No Jump means that when the user clicks on a hyperlink, the page will not jump to the page pointed to by the link, but on the current page for subsequent operations. HTML without jumping is usually used to achieve the following requirements:

1. Partial refresh and dynamic loading of content.
2. Switch between editing mode and preview mode.
3. Dynamic control of the display and hiding of page elements.
4. Partial scrolling.
5. Function execution and other scenarios.

2. How to implement HTML without jumping

There are many ways to implement HTML without jumping. We will describe two of them below.

1. Use JavaScript to implement HTML without jumping

One way to implement HTML without jumping is to use JavaScript. Call the JavaScript function in the onclick event of the a tag element, and use the JavaScript function to achieve partial page refresh and other effects.

The HTML code is as follows:

<a href="#" onclick="javascript:alert(&#39;这是一个弹窗&#39;)">点击这里不跳转</a>

In the above code, by setting the href attribute to "#", clicking on the link will not jump to any page.

By calling the onclick event, in the event handler function, we can achieve effects such as partially refreshing the page.

For example, in the above code, we bind a JavaScript function through the onclick event. When the user clicks the link, a prompt window will pop up.

The JavaScript code is as follows:

<script>
function myFunction(){
alert("这是一个弹窗");
}
</script>

2. Use the data attribute to implement HTML without jumping

In addition to using JavaScript to implement HTML without jumping, another One way is to use the data attribute. Using the data attribute, you can put the parameters that need to be passed to the page into the data attribute for parsing in the page.

The HTML code is as follows:

<a href="#" data-value="这是一个传递参数实例">点击这里不跳转</a>

In the above code, we set the href attribute to "#" so that when clicking the link, it will not jump to any page. Then, we pass the parameters that need to be passed to the page through the data-value attribute.

Through frameworks such as jQuery or JavaScript, we can obtain the value of the data-value attribute in the onclick event of the link and process it accordingly.

The JavaScript code is as follows:

<script>
$(document).ready(function(){
$("a").click(function(){
var value=$(this).data("value");
alert(value);
});
});
</script>

In the above code, we obtain a tag element through jQuery, and parse the value of the data-value attribute in the onclick event of the element, and A prompt window pops up.

3. Summary

This article introduces the implementation method of HTML without jumping. Among them, using JavaScript and using the data attribute to prevent HTML from jumping are the more common methods. It should be noted that in scenarios where the data attribute is used, the passed parameters need to be parsed in the page. In actual development, different solutions should be selected according to specific needs to achieve the effect of HTML not jumping.

The above is the detailed content of How to avoid jumping when clicking on a link in html. For more information, please follow other related articles on the PHP Chinese website!