Membuat Tab Bootstrap Tetap Walaupun Di Refresh

Membuat Tab Bootstrap Tetap Walaupun Di Refresh

Membuat Tab Bootstrap Tetap Walaupun Di Refresh – Tab pada bootstrap berfungsi untuk membuat tampilah sebuah desain lebih simpel. Tab bisa terdiri dari lebih satu, dua atau tiga.

Saya mengalami masalah ketika tab yang saya tampilkan lebih dari satu, dan ketika tab yang kedua di klik, dan halaman di refresh, tab akan kembali ke halaman awal atau tab awal. Nah untuk mengatasi itu saya menambahkan beberapa script jquery untuk membuat tab menjadi lebih statis,

FItur ini memanfaatkan cookies dengan script jquery, sama hal nya seperti yang saya alkukan pada paging datatable yang mengalami masalah yang sama dengan tab ini.

Membuat Tab Bootstrap Tetap Walaupun Di Refresh

Penambahan script jquery yang berguna untuk membaut pilihan tab menjadi tetap walalupun halaman di refresh atau di load. Ini berguna untuk menjaga dan membaut user atau pengguna menjadi lebih nyaman tanpa harus mengklik tab yang sebelumnya telah di pilih.

Tempatkan script jquery berikut sebelum tab </body>

<script>
$(function() { //keep tab
 // for bootstrap 3 use 'shown.bs.tab', for bootstrap 2 use 'shown' in the next line
 $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
 // save the latest tab; use cookies if you like 'em better:
 localStorage.setItem('lastTab', $(this).attr('href'));
 });

// go to the latest tab, if it exists:
 var lastTab = localStorage.getItem('lastTab');
 if (lastTab) {
 $('[href="' + lastTab + '"]').tab('show');
 }
});
</script>

Demikian modifikasi tab bootstrap agar menjadi lebih nyaman untuk user ketika sedang melihat sebuah tampilan data sebuah web.