1

Quisiera cambiar este script de jquery a javascript puro, es para mostrar el contenido de unos tabs según se vaya dando click en las cabeceras. Y no tener que usar el CND de jquery porque entra en conflicto con otros componentes de mi pagina.

$(document).ready(function(){

$('.but1').click(function(){
    
    $('.fund-info').css('display','none');
    $('.tab1').css('display','block');
})

$('.but2').click(function(){
    
    $('.fund-info').css('display','none');
    $('.tab2').css('display','block');
})

$('.but3').click(function(){
    
    $('.fund-info').css('display','none');
    $('.tab3').css('display','block');
})

$('.but4').click(function(){
    
    $('.fund-info').css('display','none');
    $('.tab4').css('display','block');
})
    
});

he intentado esto hasta el momento

var but1  = document.getElementsByClassName('.but1').addEventListener('click',function(){
    var fundInfo = getElementsByClassName('.fund-info')
    fundInfo.style.display = 'none'
    var tab1 = getElementsByClassName('.tab1')
    tab1.style.display = 'block'

});
0

2 respuestas 2

6

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

6
  • 1
    Aunque siento que ese código se puede mejorar mucho para evitar tantos bloques repetitivos, pero eso ya se lo dejo a los expertos de js
    – user128299
    Commented el 18 oct. 2020 a las 19:56
  • Muchas gracias por la explicación, pero después de cada evento click que puedo usar para limpiar o resetear?. Lo que pasa es que al segundo click el contenido fund-info anterior no se oculta y los otros se van acumulando hacia bajo.
    – aguito1877
    Commented el 18 oct. 2020 a las 20:00
  • ¿Por qué no agrupas todo en un sólo listener, puesto que el código es el mismo en todos los bloques? Puedes usar querySelectorAll para alcanzar una lista de clases y asignar el listener a los elementos de esa clase. Aquí hay varios ejemplos de selección usando múltiples clases.
    – A. Cedano
    Commented el 18 oct. 2020 a las 20:05
  • Lo solucione, no de la manera mas optima pero gracias por la ayuda.
    – aguito1877
    Commented el 18 oct. 2020 a las 20:12
  • 1
    claro @A.Cedano de hecho por eso me auto comenté, para que en un espacio me acuerde de hacer una edición pues como acoté es muy repetitivo, de manera inicial solo quise dejarlo tal cual lo tenía el OP pero claro esta es cierto lo que expones y lo agregaré
    – user128299
    Commented el 18 oct. 2020 a las 20:12
0

para cambiar ese script a JavaScript puro debes cambiar lo siguiente:

// $(document).ready() es similar a window.onload = function(){}
//.addEventListener es similar a .click() en jquery
// document.getElementsByClassName('clase') es lo mismo que $('.clase') en jquery
//style.propiedadcss es igual a .css('propiedad', 'valor') en jquery
//MUY IMPORTANTE el foreach para recorrer todos los elementos recogidos con el document.ElementsByClassName('clase'), también comentar que en el for hay que utilizar un of para que este funcione

window.onload = function(){
    var but1 = document.getElementsByClassName('but1');
    var but2 = document.getElementsByClassName('but2');
    var but3 = document.getElementsByClassName('but3');
    var but4 = document.getElementsByClassName('but4');

    var tab1 = document.getElementsByClassName('tab1');
    var tab2 = document.getElementsByClassName('tab2');
    var tab3 = document.getElementsByClassName('tab3');
    var tab4 = document.getElementsByClassName('tab4');

    var fundInfo = document.getElementsByClassName('fund-info');


    for(var elemento of but1){
        this.addEventListener('click', function(){
            fundInfo.style.display = 'none';
            tab1.style.display = 'block';
        });
    }
    
    for(var elemento of but2){
        this.addEventListener('click', function(){
            fundInfo.style.display = 'none';
            tab2.style.display = 'block';
        });
    }
    
    for(var elemento of but3){
        this.addEventListener('click', function(){
            fundInfo.style.display = 'none';
            tab3.style.display = 'block';
        });
    }
    
    for(var elemento of but4){
        this.addEventListener('click', function(){
            fundInfo.style.display = 'none';
            tab4.style.display = 'block';
        });
    }
}

Espero haberte servido de ayuda.

¡Un saludo!

6
  • 2
    Dudo que esto: document.getElementsByClassName('but1').addEventListener('click', function(){ funcione desde que ese selector te retornará múltiples elementos
    – user128299
    Commented el 18 oct. 2020 a las 19:31
  • @BetaM Yo pienso que si ya que cada elemento con esa clase esta escuchando un click, cuando se haga click en alguno de los elementos que tenga esta clase, se ejecutará el código que está dentro del addEventListener.
    – jesusdaza
    Commented el 18 oct. 2020 a las 19:34
  • Ummm no, explico: ese selector te retornará N elementos, entonces puedes o iterarlos con un foreach y dar un listener o indicar el índice del elemento deseado
    – user128299
    Commented el 18 oct. 2020 a las 19:35
  • @BetaM Tienes razón, se me fue la cabeza por completo, gracias por la ayuda. Ahora mimo cambio el código
    – jesusdaza
    Commented el 18 oct. 2020 a las 19:37
  • De nuevo yo por aqui, te recomiendo una vuelta por array.prototype.forEach lo que alcanzo a ver no parece una sintaxis válida
    – user128299
    Commented el 18 oct. 2020 a las 19:50

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.