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 afundInfo
) - 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;
});
});