Skip to main content
2 de 2
se añadieron 2711 caracteres en el cuerpo
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;
    });
});

EDICIÓN

Como dejé en los comentarios, se me hace algo repetitivo el código dado lo cual pienso podemos tomar el siguiente script como ejemplo de la idea que trato de exponer:

  • La botonera que esté dentro de una etiqueta padre a la cual le damos una clase general
  • A cada uno de los botones les damos dos clases en común (esto lo emplearemos después)
  • Escuchamos el click en el padre
  • Evaluamos si ese elemento que tiene la referencia contiene una clase (la misma que le dimos a todos los botones previamente)
  • En caso afirmativo del paso anterior, también establecemos la otra condición para identificar cual de los 3 botones es
    • Una vez que ambas condiciones se cumplen entonces podemos aplicar los estilos CSS deseados

Código:

    <div class="container">
      <button class="container-button first">
        Botón 1
      </button>
      <button class="container-button second">
        Botón 2
      </button>
      <button class="container-button third">
        Botón 3
      </button>
    </div>

    <p class="parrafoX">Párrafo 1</p>
    <p class="parrafoY">Párrafo 2</p>
    <p class="parrafoZ">Párrafo 1</p>

    <script>
      let listaBotonera = document.querySelector('.container');
      
      let parrafoUno  = document.querySelector('.parrafoX');
      let parrafoDos  = document.querySelector('.parrafoY');
      let parrafoTres = document.querySelector('.parrafoZ');
      
      listaBotonera.addEventListener('click', (evento) => {
        let elementTrigger = evento.target;
        if (elementTrigger.classList.contains('container-button') && elementTrigger.classList.contains('first')) {
          parrafoUno.style.color = 'teal';
        } else if (elementTrigger.classList.contains('container-button') && elementTrigger.classList.contains('second')) {
          parrafoDos.style.color = 'crimson';
        } else if(elementTrigger.classList.contains('container-button') && elementTrigger.classList.contains('third')) {
          parrafoTres.style.color = 'yellow';
        }
      });
    </script>

Referencias

Postdata esto es un pobre acercamiento, son bienvenidas propuestas mas serias

user128299