Gunakan jquery untuk menukar alamat sambungan

Dengan pembangunan dan kemajuan Internet yang berterusan, reka bentuk web menjadi lebih interaktif dan dinamik, dan jQuery, sebagai perpustakaan JavaScript yang ringan, digunakan secara meluas dalam pembangunan bahagian hadapan web lebih Mudah mencapai kesan halaman web. Antaranya, fungsi yang sangat biasa ialah menggunakan jQuery untuk menukar alamat sambungan Artikel ini akan memperkenalkan aspek ini secara terperinci.

1. Cara menukar alamat sambungan

Menukar alamat sambungan bermakna menukar alamat URL yang sepadan dengan pautan tanpa melompat ke halaman apabila pengguna mengklik pada pautan. Sebagai contoh, kita boleh menggunakan fungsi ini untuk membuat tapak web satu halaman dan memuatkan kandungan yang sepadan dengan menukar alamat URL, membuatkan pengguna berasa seperti mereka melawat berbilang halaman, mencapai kesan dinamik tanpa menyegarkan. Jadi, bagaimana untuk menggunakan jQuery untuk menukar alamat sambungan?

1. Gunakan atribut window.location.href

window.location.href ialah atribut JavaScript yang biasa digunakan, digunakan untuk mendapatkan atau menetapkan alamat URL halaman semasa. Jika kita ingin menukar alamat pautan, kita hanya perlu menggunakan atribut ini. Kaedah pelaksanaan khusus adalah seperti berikut:

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

Antaranya, #link ialah id pautan yang alamat pautannya akan diubah suai, dan http://www.example.com ialah alamat URL yang diubah suai. Apabila pengguna mengklik pada pautan, ia akan melompat ke alamat URL ini, dan alamat baharu juga akan dipaparkan dalam bar alamat.

2. Gunakan kaedah history.pushState()

Selain menggunakan atribut window.location.href, anda juga boleh menggunakan kaedah history.pushState() yang baru diperkenalkan dalam HTML5 untuk melaksanakan fungsi menukar alamat pautan. Menggunakan kaedah ini, menukar alamat halaman tidak menyebabkan halaman dimuat semula, tetapi mengubah keadaan semasa dalam sejarah penyemak imbas melalui kod JavaScript.

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

Antaranya, null dan null ialah parameter yang digunakan untuk meletakkan ruang letak, menunjukkan bahawa data status dan tajuk yang berkaitan tidak berubah, dan http://www.example.com ialah alamat URL yang diubah suai. Begitu juga, apabila pengguna mengklik pautan, alamat URL akan bertukar kepada alamat baharu, tetapi halaman tidak akan dimuat semula dan alamat baharu akan dipaparkan dalam bar alamat.

2. Gunakan jQuery untuk mencapai kesan menukar halaman secara dinamik tanpa menyegarkan

Dalam bab di atas, kami memperkenalkan kaedah menggunakan jQuery untuk menukar alamat pautan, tetapi jika kami ingin mencapai penukaran dinamik tanpa menyegarkan Untuk mencapai kesan penukaran halaman, kaedah di atas perlu diperbaiki dan dikembangkan. Berikut adalah kaedah pelaksanaan yang lebih umum.

1. Bertukar antara nod

Pertama, kita perlu membuat berbilang nod halaman tersembunyi pada halaman (boleh menjadi tag div, p, seksyen, dll), nod ini perlu mengandungi kami Kandungan untuk dipaparkan. Sebagai contoh, kita boleh menciptanya seperti ini:

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

Antaranya, class="page" adalah untuk memudahkan gaya tetapan dan operasi JavaScript, dan nilai id adalah untuk memudahkan kita memilih dan mengendalikan nod ini melalui jQuery .

2. Pengikatan pautan

Seterusnya, kita perlu mengikat setiap pautan ke acara klik. Apabila pengguna mengklik pada pautan, kami boleh menggunakan jQuery untuk mendapatkan atribut href pautan dan menghuraikan nilai id nod halaman yang perlu dipaparkan. Kemudian, kami menunjukkan nod dan menyembunyikan nod yang lain. Pelaksanaan khusus adalah seperti berikut:

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

Antaranya, $('a') bermaksud memilih semua pautan, e.preventDefault() ialah tingkah laku lalai untuk menghalang pautan, $(this).attr(' href') ialah Dapatkan nilai atribut href bagi pautan semasa $('.page').hide() menyembunyikan semua nod halaman, manakala $(pageId).show() memaparkan nod halaman yang sepadan.

3. Tukar alamat URL

Akhir sekali, kita juga perlu menambah logik untuk menukar alamat URL dalam peristiwa klik pautan, supaya apabila pengguna beralih ke halaman yang berbeza, bar alamat juga akan berubah dalam masa nyata Paparkan alamat URL yang sepadan. Pelaksanaan khusus adalah seperti berikut:

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

Antaranya, history.pushState(null, null, pageId) menggunakan kaedah history.pushState() untuk menukar alamat URL PageId di sini ialah nilai id bagi nod halaman dipaparkan, iaitu Alamat URL yang sepadan.

3. Ringkasan

Melalui pengenalan di atas, kami telah mempelajari cara menggunakan jQuery untuk menukar alamat pautan, dan cara mencapai kesan bebas muat semula dengan menukar halaman secara dinamik. Dalam pembangunan sebenar, kami boleh memilih kaedah yang sesuai untuk dilaksanakan berdasarkan keperluan projek dan keadaan khusus, dengan itu meningkatkan interaktiviti dan pengalaman pengguna tapak web. Walau bagaimanapun, perlu diingat bahawa apabila menggunakan kaedah history.pushState(), penyemak imbas perlu menyokong HTML5, jika tidak, ia tidak akan memberi kesan.

Atas ialah kandungan terperinci Gunakan jquery untuk menukar alamat sambungan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!