easy css js tabs

easy css js tabs

<script>
    $(document).ready(function() {

        $('.yal-tabs .tabs-header .tab').on('click', function(e) {
            // console.log('asfasdfa 1');
            if (!$(this).hasClass('active')) {
                $(this).closest('.yal-tabs').find('.tabs-header .tab').removeClass('active');
                $(this).addClass('active');
                let p = $(this).index();
                // console.log('asfasdfa 3 pos: ' + p);
                $(this).closest('.yal-tabs').find('.tabs-body .tab-content').removeClass('active');
                $(this).closest('.yal-tabs').find('.tabs-body .tab-content').eq(p).addClass('active');
            }
        });

    });
</script>

<style>
    .yal-tabs {}
    .yal-tabs .tabs-body .tab-content { display: none;}
    .yal-tabs .tabs-body .tab-content.active { display: block;}
</style>

<div class="yal-tabs tabs">

    <div class="tabs-header ">
        <div class="tab active">tab1</div>
        <div class="tab">tab2</div>
        <div class="tab">tab3</div>
    </div>

    <div class="tabs-body">

        <div class="tab-content active">
            tab content 1
        </div>
        <!-- .tab-content -->

        <div class="tab-content">
            tab content 2
        </div>
        <!-- .tab-content -->

    </div>
    <!-- .tabs-body -->

</div>
<!-- .tabs -->