Saya sedang mengembangkan halaman web di mana saya menggunakan Bootstrap Framework Twitter dan Bootstrap Tabs JS mereka . Ini berfungsi dengan baik kecuali untuk beberapa masalah kecil, salah satunya adalah saya tidak tahu bagaimana masuk langsung ke tab tertentu dari tautan eksternal. Sebagai contoh:
<a href="facility.php#home">Home</a>
<a href="facility.php#notes">Notes</a>
harus pergi ke tab Beranda dan tab Catatan masing-masing ketika mengklik tautan dari halaman eksternal
javascript
html
tabs
twitter-bootstrap
mraliks
sumber
sumber
Jawaban:
Ini solusi saya untuk masalah ini, mungkin agak terlambat. Tapi itu mungkin bisa membantu orang lain:
sumber
window.scrollTo(0, 0);
untuk memastikan bahwa Window selalu menggulir ke atasSyntax error, unrecognized expression: .nav-tabs a[href=#tab-2]
. Dipecahkan menggunakan stackoverflow.com/questions/12131273/...MEMPERBARUI
Untuk Bootstrap 3, ubah
.on('shown', ...)
ke.on('shown.bs.tab', ....)
Ini didasarkan pada jawaban @dubbe dan jawaban yang diterima SO ini . Ini menangani masalah dengan
window.scrollTo(0,0)
tidak berfungsi dengan benar. Masalahnya adalah ketika Anda mengganti tab hasl pada url yang ditampilkan, browser akan menggulir ke hash itu karena merupakan elemen pada halaman. Untuk menyiasatinya, tambahkan awalan sehingga hash tidak mereferensikan elemen halaman yang sebenarnyaContoh penggunaan
Jika Anda memiliki tab-pane dengan id = "mytab" Anda harus meletakkan tautan Anda seperti ini:
sumber
$('.nav-tabs a[href="'+hash.replace(prefix,"")+'"]').tab('show');
Anda dapat memicu
click
acara di tautan tab yang sesuai:sumber
Ini adalah implementasi yang ditingkatkan dari solusi dubbe yang mencegah pengguliran.
sumber
Sementara solusi JavaScript yang disediakan dapat berfungsi, saya menggunakan cara yang sedikit berbeda yang tidak memerlukan JavaScript tambahan, tetapi memang membutuhkan logika dalam pandangan Anda. Anda membuat tautan dengan parameter URL standar, seperti:
Kemudian Anda cukup mendeteksi nilai activeTab untuk menulis 'class = "active"' yang sesuai
<li>
Kodesemu (implementasikan sesuai dalam bahasa Anda). Catatan Saya telah menetapkan tab 'beranda' sebagai aktif default jika tidak ada parameter yang diberikan dalam contoh ini.
sumber
Saya bukan penggemar if ... else; jadi saya mengambil pendekatan yang lebih sederhana.
Tidak membahas pengguliran ke hash yang diminta; tetapi haruskah itu?
sumber
Untuk Bootstrap 3:
https://jsfiddle.net/DTcHh/6638/
sumber
Ini berfungsi di Bootstrap 3 dan meningkatkan 2 jawaban teratas dubbe dan flynfish dengan mengintegrasikan jawaban GarciaWebDev juga (yang memungkinkan parameter url setelah hash dan langsung dari penulis Bootstrap pada pelacak masalah github):
sumber
'shown'
harus'shown.bs.tab'
sesuai dengan dokumen: getbootstrap.com/javascript/#tabs-events . Saya bingung mengapa tetapi ketika saya mencoba mengedit posting Anda ditolak ...Kode ini memilih tab kanan tergantung pada hash # dan menambahkan # hash kanan ketika tab diklik. (ini menggunakan jquery)
Dalam Coffeescript:
atau di JS:
sumber
Membangun solusi Demircan Celebi; Saya ingin tab terbuka saat memodifikasi url dan buka tab tanpa harus memuat ulang halaman dari server.
sumber
Kode ini dari http://github.com/twitter/bootstrap/issues/2415#issuecomment-4450768 bekerja dengan baik untuk saya.
sumber
@flynfish + @Ztyx solusi yang saya gunakan untuk tab bersarang:
anak-anak harus memiliki class = "nested"
sumber
Saya datang dengan solusi yang menggunakan hash url atau localStorage tergantung pada ketersediaan yang terakhir dengan kode di bawah ini:
sumber
Saya sarankan Anda menggunakan kode yang disediakan oleh penulis Bootstrap pada pelacak masalah mereka di GitHub :
Anda dapat menemukan di tautan ke masalah ini informasi lebih lanjut tentang mengapa mereka tidak memilih untuk mendukungnya.
sumber
Mencoba beberapa cara yang dibahas di atas dan berakhir dengan mengikuti solusi yang berfungsi, cukup salin dan tempel di editor Anda untuk mencoba. Untuk menguji cukup ubah hash ke inbox, outbox, buat url dan tekan enter.
Semoga ini akan menghemat waktu Anda.
sumber
Inilah yang saya lakukan, sangat sederhana, dan asalkan tautan tab Anda memiliki ID yang terkait dengannya, Anda bisa mendapatkan atribut href dan meneruskannya ke fungsi yang menampilkan konten tab:
Kemudian di url Anda, Anda dapat menambahkan hash sebagai sesuatu seperti: # tab_tab1, bagian 'tab_' dihapus dari hash itu sendiri sehingga ID tautan tab aktual di nav-tabs (tabid1) ditempatkan setelah ini, jadi Anda url akan terlihat seperti: www.mydomain.com/index.php#tab_tabid1.
Ini berfungsi sempurna untuk saya dan berharap ini membantu orang lain :-)
sumber
Ini solusi saya untuk menangani tab bersarang. Saya baru saja menambahkan fungsi untuk memeriksa apakah tab aktif memiliki tab induk untuk diaktifkan. Ini fungsinya:
Dan bisa disebut seperti ini (Berdasarkan solusi @ flynfish):
Solusi ini berfungsi cukup baik untuk saya saat ini. Semoga ini bisa bermanfaat untuk orang lain;)
sumber
Saya harus memodifikasi beberapa bit agar ini berfungsi untuk saya. Saya menggunakan Bootstrap 3 dan jQuery 2
sumber
Cukup masukkan kode ini di halaman Anda:
sumber
Saya baru saja mengalami masalah ini, tetapi perlu menangani beberapa level tab. Kode ini agak jelek (lihat komentar), tetapi melakukan tugasnya: https://gist.github.com/JensRantil/4721860 Semoga orang lain akan merasa berguna (dan merasa bebas untuk mengusulkan solusi yang lebih baik!).
sumber
Menggabungkan peices dari jawaban lain, berikut adalah solusi yang dapat membuka banyak level tab bersarang:
sumber
$('.nav-tabs li a').click( function(e) { history.pushState( null, null, $(this).attr('href') );});
di javascript di atas kode Anda.Jika penting bagi siapa pun, kode berikut ini kecil dan berfungsi tanpa cacat, untuk mendapatkan nilai hash tunggal dari URL dan menunjukkan bahwa:
apa yang dilakukannya adalah mengambil id dan menjalankan event klik. Sederhana.
sumber
Saya membuat sth seperti ini untuk tautan dengan ajax
#!#
(mis / test.com #! # Test3) tetapi Anda dapat memodifikasinya apa pun yang Anda sukaContoh dengan halaman sederhana di Github di sini
sumber
Saya tahu utas ini sangat lama, tetapi saya akan meninggalkan di sini implementasi saya sendiri:
Perhatikan bahwa saya menggunakan
nav-
awalan kelas ke tautan nav.sumber