Rumah > hujung hadapan web > tutorial js > Bagaimanakah Saya Navigasi Secara Pengaturcaraan ke Tab Bootstrap Tertentu melalui URL?

Bagaimanakah Saya Navigasi Secara Pengaturcaraan ke Tab Bootstrap Tertentu melalui URL?

Mary-Kate Olsen
Lepaskan: 2024-11-25 19:30:12
asal
443 orang telah melayarinya

How Do I Programmatically Navigate to Specific Bootstrap Tabs via URL?

Menavigasi ke Tab Tertentu dalam Bootstrap

Apabila bekerja dengan tab Bootstrap, anda mungkin menghadapi cabaran untuk memaut terus ke tab tertentu daripada sumber luar. Ini boleh menjadi kesulitan jika anda mahu pengguna mengakses tab yang diingini dengan lancar daripada pautan luaran. Begini cara untuk menyelesaikan isu ini:

Untuk mendayakan pautan terus ke tab, laksanakan penyelesaian JavaScript berikut:

// Enable link to tab
var hash = location.hash.replace(/^#/, '');
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;
})
Salin selepas log masuk

Dengan skrip ini tersedia, klik pada pautan luaran seperti ini:

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

kini menavigasi pengguna terus ke tab Laman Utama dan Nota, masing-masing. Selain itu, apabila tab dipilih dalam halaman, cincangan URL berubah dengan sewajarnya, mengekalkan pemilihan tab walaupun selepas halaman dimuat semula.

Atas ialah kandungan terperinci Bagaimanakah Saya Navigasi Secara Pengaturcaraan ke Tab Bootstrap Tertentu melalui URL?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
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