Materi
Roadmap
Proyek
Sertifikat
Skillance Code Lab
Jalankan »
Skillance Code Lab Editor
Editor
Hasil
Split
Editor Kode Sumber
Tekan
Ctrl + Enter
untuk Menjalankan
<!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script> <style> body { font-family: sans-serif; padding: 20px; background: #f8fafc; } .tab-nav { display: flex; gap: 8px; border-bottom: 2px solid #e2e8f0; margin-bottom: 15px; } .tab-btn { background: none; border: none; padding: 10px 18px; cursor: pointer; font-weight: bold; color: #64748b; border-bottom: 3px solid transparent; } .tab-btn.active { color: #00758f; border-bottom-color: #00758f; } .tab-pane { display: none; background: white; padding: 20px; border-radius: 8px; border: 1px solid #e2e8f0; } .tab-pane.active { display: block; } </style> </head> <body> <h3>Komponen Tab Interaktif Skillance</h3> <div class="tab-nav"> <button class="tab-btn active" data-tab="tab1">Modul HTML5</button> <button class="tab-btn" data-tab="tab2">Modul CSS3</button> <button class="tab-btn" data-tab="tab3">Modul jQuery</button> </div> <div id="tab1" class="tab-pane active"> <h4>Belajar HTML5 Modern</h4> <p>Memahami struktur semantik tag, formulir, dan multimedia canvas.</p> </div> <div id="tab2" class="tab-pane"> <h4>Belajar CSS3 & Flexbox</h4> <p>Menguasai responsive grid, tata letak modern, dan animasi transisi warna.</p> </div> <div id="tab3" class="tab-pane"> <h4>Belajar jQuery DOM</h4> <p>Mempercepat pengembangan interaktivitas dengan 'Write Less, Do More'.</p> </div> <script> $(document).ready(function() { $('.tab-btn').click(function() { $('.tab-btn').removeClass('active'); $(this).addClass('active'); const targetTab = $(this).data('tab'); $('.tab-pane').removeClass('active'); $('#' + targetTab).addClass('active'); }); }); </script> </body> </html>
Hasil Tampilan (Browser Preview)
Muat Ulang