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

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>

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;
})

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!