Bagaimanakah Saya Boleh Navigasi ke Tab Bootstrap Tertentu daripada Pautan Luaran atau Selepas Muat Semula Halaman?

Menavigasi Tab Bootstrap Twitter daripada Pautan Luaran atau Muat Semula Halaman

Apabila memasukkan Tab Bootstrap Twitter ke dalam halaman web anda, menavigasi terus ke tab tertentu daripada pautan luaran atau semasa muat semula halaman boleh mencabar. Artikel ini menyelidiki penyelesaiannya, membolehkan anda melakukan peralihan antara tab dengan lancar.

Latar Belakang Masalah

Andaikan anda mempunyai halaman bernama facility.php yang menggunakan Tab Bootstrap dan anda ingin menavigasi ke tab tertentu daripada halaman luaran. Sebagai contoh, mengklik pautan berikut:

<a href="facility.php#home">Home</a>
<a href="facility.php#notes">Notes</a>

sepatutnya menuju ke tab Laman Utama dan Nota, masing-masing. Walau bagaimanapun, peralihan ini gagal berlaku apabila navigasi terus dari halaman luaran.

Penyelesaian

Untuk menangani isu ini, kami menggunakan kod JavaScript berikut:

// Javascript to enable link to tab
var hash = location.hash.replace(/^#/, '');  // ^ means starting, meaning only match the first hash
if (hash) {
    $('.nav-tabs a[href=""' + hash + '""]').tab('show');
} 

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

Jom periksa setiap bahagian penyelesaian:

• Mendapatkan Arus Tab: Bahagian pertama kod (hash = location.hash.replace(/^#/, '')) mendapatkan semula pengecam serpihan tab semasa (#home atau #notes) daripada URL.
• Mengaktifkan Tab yang Diingini: Kami kemudian menggunakan .nav-tabs a[href="hash"] untuk memilih elemen tab yang sepadan dengan pengecam serpihan. Akhir sekali, kami menggunakan .tab('show') untuk mengaktifkan tab yang dipilih.
• Mengemas kini URL pada Muat Semula Halaman: Bahagian kedua kod (window.location.hash = e .target.hash) mengemas kini pengecam serpihan URL agar sepadan dengan tab yang diaktifkan apabila halaman dimuat semula. Ini memastikan bahawa tab semasa dikekalkan walaupun selepas halaman dimuat semula.

Dengan penyelesaian ini, anda kini boleh menavigasi terus ke tab Bootstrap tertentu dengan mudah daripada pautan luaran atau semasa muat semula halaman, meningkatkan pengalaman pengguna.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Navigasi ke Tab Bootstrap Tertentu daripada Pautan Luaran atau Selepas Muat Semula Halaman?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!