Use jquery to change the connection address

With the continuous development and progress of the Internet, web design is becoming more and more interactive and dynamic, and jQuery, as a lightweight JavaScript library, is widely used in the development of web front-ends. It can help us be more Easily achieve web page effects. Among them, a very common function is to use jQuery to change the connection address. This article will introduce this aspect in detail.

1. How to change the connection address

Changing the connection address means changing the URL address corresponding to the link without jumping to the page when the user clicks on the link. For example, we can use this function to create a single-page website and load the corresponding content by switching URL addresses, making users feel like they are visiting multiple pages, achieving a dynamic effect without refreshing. So, how to use jQuery to change the connection address?

1. Use the window.location.href attribute

window.location.href is a commonly used JavaScript attribute, used to get or set the URL address of the current page. If we want to change the address of the link, we only need to use this attribute. The specific implementation method is as follows:

$('#link').click(function(){
  window.location.href = 'http://www.example.com'; //修改链接地址
});

Among them, #link is the id of the link whose link address is to be modified, and http://www.example.com is the modified URL address. When the user clicks on the link, it will jump to this URL address, and the new address will also be displayed in the address bar.

2. Use the history.pushState() method

In addition to using the window.location.href attribute, you can also use the history.pushState() method newly introduced in HTML5 to realize the function of changing the link address. . Using this method, changing the page address does not cause the page to be reloaded, but changes the current state in the browser history through JavaScript code.

$('#link').click(function(){
  history.pushState(null, null, 'http://www.example.com'); //修改链接地址
});

Among them, null and null are placeholder parameters, indicating that the relevant status data and title have not changed, and http://www.example.com is the modified URL address. Similarly, when the user clicks the link, the URL address will change to a new address, but the page will not refresh and the new address will be displayed in the address bar.

2. Use jQuery to achieve the effect of dynamically switching pages without refreshing

In the above chapter, we introduced the method of using jQuery to change the link address, but if we want to achieve dynamic switching without refreshing To achieve the effect of switching pages, the above methods need to be improved and expanded. The following is a more general implementation method.

1. Switching between nodes

First, we need to create multiple hidden page nodes on a page (can be div, p, section, etc. tags), these nodes need to contain our Content to display. For example, we can create it like this:

<div id="page1" class="page">
  <h1>这是第1页</h1>
</div>
<div id="page2" class="page">
  <h1>这是第2页</h1>
</div>
<div id="page3" class="page">
  <h1>这是第3页</h1>
</div>

Among them, class="page" is to facilitate setting styles and JavaScript operations, and the id value is to facilitate us to select and operate these nodes through jQuery.

2. Binding of links

Next, we need to bind each link to a click event. When a user clicks on a link, we can use jQuery to obtain the href attribute of the link and parse out the id value of the page node that needs to be displayed. Then, we show the node and hide the other nodes. The specific implementation is as follows:

$('a').click(function(e){
  e.preventDefault(); //防止链接跳转
  var pageId = $(this).attr('href'); //获取链接的href属性
  $('.page').hide(); //先隐藏所有的页面节点
  $(pageId).show(); //再展示对应的页面节点
});

Among them, $('a') means to select all links, e.preventDefault() is the default behavior of preventing links, $(this).attr('href') is Get the href attribute value of the current link. $('.page').hide() hides all page nodes, while $(pageId).show() displays the corresponding page nodes.

3. URL address change

Finally, we also need to add the logic of changing the URL address in the click event of the link, so that when the user switches to different pages, the address bar will also be displayed in real time. Display the corresponding URL address. The specific implementation method is as follows:

$('a').click(function(e){
  e.preventDefault(); //防止链接跳转
  var pageId = $(this).attr('href'); //获取链接的href属性
  $('.page').hide(); //先隐藏所有的页面节点
  $(pageId).show(); //再展示对应的页面节点
  history.pushState(null, null, pageId); //改变URL地址
});

Among them, history.pushState(null, null, pageId) uses the history.pushState() method to change the URL address. The pageId here is the id value of the displayed page node, that is, The corresponding URL address.

3. Summary

Through the above introduction, we have learned how to use jQuery to change the link address, and how to achieve a refresh-free effect by dynamically switching pages. In actual development, we can choose appropriate methods to implement based on project needs and specific circumstances, thereby improving the interactivity and user experience of the website. However, it should be noted that when using the history.pushState() method, the browser needs to support HTML5, otherwise it will not have an effect.

The above is the detailed content of Use jquery to change the connection address. For more information, please follow other related articles on the PHP Chinese website!