Estrutura de código para criar um formato de tab usando Elementor e Jetengine

<a href="#" data-target="coxaoduro">
    <div id="nao-interessa"></div>
</a>

<a href="#" data-target="picanha">
    <div id="nao-interessa"></div>
</a>

<a href="#" data-target="alcatra">
    <div id="nao-interessa"></div>
</a>

<!-- Onde ficam as Tabs -->

<div class="listing-mapa-boi">

    <div class="jet-listing-grid__item">
        <div class="nao-interessa">
            <div id="coxaoduro">Conteúdo aqui que deve aparecer</div>
        </div>
    </div>

    <div class="jet-listing-grid__item">
        <div class="nao-interessa">
            <div id="picanha">Conteúdo aqui que deve aparecer</div>
        </div>
    </div>

    <div class="jet-listing-grid__item">
        <div class="nao-interessa">
            <div id="alcatra">Conteúdo aqui que deve aparecer</div>
        </div>
    </div>

</div>

<style>
    .jet-listing-grid__item {
        display: none;
    }

    .jet-listing-grid__item:first-child {
        display: block;
    }

    .active {
        /* Estilize a classe 'active' de acordo com suas preferências */
        font-weight: bold;
        color: blue;
    }
</style>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const tabLinks = document.querySelectorAll('a[data-target]');
        const tabItems = document.querySelectorAll('.jet-listing-grid__item');

        tabLinks.forEach(function (link) {
            link.addEventListener('click', function (event) {
                event.preventDefault();
                const targetId = event.currentTarget.getAttribute('data-target');

                // Atualizar a classe 'active' nos links
                tabLinks.forEach(function (otherLink) {
                    otherLink.classList.remove('active');
                });
                link.classList.add('active');

                tabItems.forEach(function (item) {
                    const targetContent = item.querySelector('#' + targetId);
                    if (targetContent) {
                        item.style.display = 'block';
                    } else {
                        item.style.display = 'none';
                    }
                });
            });
        });

        // Adicionar a classe 'active' ao primeiro link
        tabLinks[0].classList.add('active');
    });
</script>