jQuery Examples

<!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>