How to use JavaScript hyperlinks

How to use JavaScript hyperlinks

Hyperlinks are common elements in web pages that connect different pages or different websites, and JavaScript provides convenience for adding dynamic interactive effects to web pages. When the two are combined, the web page can be made more dynamic and practical. This article will introduce the usage and implementation of JavaScript hyperlinks in detail.

1. Basic knowledge

In HTML, hyperlinks are defined using the tag, as shown below:

Link text

Among them, the href attribute identifies the URL pointed to by the hyperlink. If you need to point a hyperlink to an anchor on the current page, you can use the "#" symbol plus the anchor name as the URL, as shown below:

Jump to the first section

In addition, the tag can also use the target attribute to specify how the link is opened. Commonly used values ​​include _blank, _self, _parent and _top, which respectively mean opening in a new window, opening in the current window, opening in the parent window and opening in the entire window. For example:

Open the link in a new window

2. How to implement JavaScript hyperlinks

1. Prevent default jump behavior

In some cases, it is necessary to prevent hyperlinks from jumping and just execute some JavaScript code. At this time, you can use the preventDefault() method to prevent the default jump behavior, for example:

No jump, execute JS code

In the above code, the onclick event handler function The event.preventDefault() statement in can prevent the default jump, and any JavaScript code can be added later.

2. Modify the href attribute of the link

In some cases, it is necessary to dynamically modify the href attribute of the hyperlink, so as to dynamically modify the href attribute of the hyperlink based on user operations or data status. Generate jump links. For example:

Click to jump

<script></p> <pre class="brush:php;toolbar:false">document.querySelector(&quot;#myLink&quot;).addEventListener(&quot;click&quot;, function(){     var targetUrl = &quot;http://www.example.com?id=&quot; + getUserId();     this.href = targetUrl; });</pre> <p></script>

In the above code, pass The addEventListener() method adds a click event handler to the myLink hyperlink. When the user clicks the link, the JavaScript code will obtain the target URL based on the current user ID and set the href attribute of the myLink hyperlink to the target URL.

3. Open link in new window

In some cases, it is necessary to open hyperlinks in new window. At this time, you can use the window.open() method to achieve this. Pass in the target URL and the preset window characteristics in the method, for example:

Open the link in a new window

In the above code, the window.open() method is called in the onclick event handling function, passing in the target URL and _blank attribute to open the link in a new window.

4. Change the page scroll position

In some cases, you need to change the page scroll position after clicking a hyperlink to jump to an anchor point on the page. At this time, you can specify the anchor name in the href attribute of the hyperlink and add JavaScript code to change the page scroll position, for example:

Jump to the first section

<script></p> <pre class="brush:php;toolbar:false">function scrollToAnchor(anchorName){     var targetElement = document.getElementById(anchorName);     if(targetElement){         window.scrollTo({top: targetElement.offsetTop, behavior: 'smooth'});     } }</pre> <p></script>

In the above code, the href attribute of the hyperlink specifies the anchor name #section1, and the onclick event handler uses scrollToAnchor() The function changes the scroll position of the page so that the page scrolls to the position represented by the section1 anchor point.

Summary:

JavaScript hyperlink is a method to enhance the interactive effects and functions of web pages. It can prevent the default jump behavior, modify the href attribute of the link, and open the link in a new window. And functions such as changing the page scroll position. It is necessary to fully understand the basic knowledge and details during implementation to ensure the correctness and maintainability of the code.

The above is the detailed content of How to use JavaScript hyperlinks. For more information, please follow other related articles on the PHP Chinese website!