


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!

Alat AI Hot

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool
Gambar buka pakaian secara percuma

Clothoff.io
Penyingkiran pakaian AI

AI Hentai Generator
Menjana ai hentai secara percuma.

Artikel Panas

Alat panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas

Ganti aksara rentetan dalam javascript

jQuery mendapatkan padding/margin elemen

HTTP Debugging dengan Node dan HTTP-Console

Tutorial Persediaan API Carian Google Custom
