Skip to main content
1 de 2
user avatar
user avatar

Partiendo de tu código te comento lo siguiente:

  • Al usar el selector getElementsByClassName te estaría retornando N elementos, por lo cual directo no puedes darle un listener; debes:
    • iterar los nodos recuperados
    • indicar el índice del elemento deseado
  • Ya que los estilos de display son repetitivos entonces mejor colócalos en variables al inicio y asigna estas como valor dinámico
  • En estos casos es mejor usar querySelector para recuperar elementos por un selector específico y que nos retorne solo un nodo (haciendo referencia a donde intentas recuperar a fundInfo)
  • Puedes emplear load para asegurar que todos los recursos se han descargado completamente asociando esto al objeto window

Código:

window.addEventListener('load', () => {
    
    let boton1   = document.querySelector('.but1');
    let boton2   = document.querySelector('.but2');
    let boton3   = document.querySelector('.but3');
    let boton4   = document.querySelector('.but4');

    let fundInfo = document.querySelector('.fund-info');
    let tabUno   = document.querySelector('.tab1');
    let tabDos   = document.querySelector('.tab2');
    let tabTres     = document.querySelector('.tab3');
    let tabCuatro   = document.querySelector('.tab4');

    let displayBlock = 'block';
    let displayNone  = 'none';

    boton1.addEventListener('click', () => {
        fundInfo.style.display = displayNone;
        tabUno.style.display = displayBlock;
    });

    boton2.addEventListener('click', () => {
        fundInfo.style.display = displayNone;
        tabDos.style.display = displayBlock;
    });

    boton3.addEventListener('click', () => {
        fundInfo.style.display = displayNone;
        tabTres.style.display = displayBlock;
    });

    boton4.addEventListener('click', () => {
        fundInfo.style.display = displayNone;
        tabCuatro.style.display = displayBlock;
    });
});
user128299