Rumah > hujung hadapan web > tutorial js > Bagaimana untuk Navigasi Terus ke Tab Bootstrap pada Muat Semula Halaman atau melalui Pautan Luaran?

Bagaimana untuk Navigasi Terus ke Tab Bootstrap pada Muat Semula Halaman atau melalui Pautan Luaran?

Barbara Streisand
Lepaskan: 2024-11-26 16:42:14
asal
308 orang telah melayarinya

How to Navigate Directly to a Bootstrap Tab on Page Reload or via External Link?

Navigasi Terus ke Tab Bootstrap pada Muat Semula Halaman atau Pautan Luaran

Apabila bekerja dengan Tab Bootstrap dalam aplikasi web, pengguna mungkin menghadapi keperluan untuk menavigasi terus ke tab tertentu apabila halaman pada mulanya dimuatkan atau apabila diklik dari luaran pautan.

Masalah:

Pertimbangkan kod HTML berikut:

<a href="facility.php#home">Home</a>
<a href="facility.php#notes">Notes</a>
Salin selepas log masuk

Niatnya adalah untuk pautan menavigasi ke Laman Utama masing-masing dan Nota tab apabila diklik daripada luaran halaman.

Penyelesaian:

Untuk mencapai fungsi ini, anda boleh menggunakan kod JavaScript berikut:

// Enable link to tab
var hash = location.hash.replace(/^#/, '');  // Remove # from start of hash
if (hash) {
    $('.nav-tabs a[href="#' + hash + '"]').tab('show');
}

// Change hash upon page reload
$('.nav-tabs a').on('shown.bs.tab', function (e) {
    window.location.hash = e.target.hash;
})
Salin selepas log masuk

Kod ini melakukan tindakan berikut :

  • Dayakan pautan ke tab: Apabila halaman dimuatkan, kod tersebut mengenal pasti bahagian cincang URL (#home atau #notes) dan secara automatik mengaktifkan tab yang sepadan dalam bar navigasi.
  • Tukar cincang untuk muat semula halaman: Apabila pengguna menavigasi antara tab, kod mengemas kini cincang dalam URL untuk mencerminkan tab yang dipilih. Dengan cara ini, apabila halaman dimuatkan semula, ia menavigasi ke tab yang betul secara automatik.

Atas ialah kandungan terperinci Bagaimana untuk Navigasi Terus ke Tab Bootstrap pada Muat Semula Halaman atau melalui Pautan Luaran?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan