[SOLUCIONADO] Guardar valor del anterior clic

[manelmanel8]

Buenas,

antes de todo dar las gracias por el tiempo.

Llevo bastante tiempo peleándome y no me sale ni a la de 3.

Tengo varios section y cada uno tiene un id diferente y cuando haces clic lo muestro.

El problema me encuentro que me gustaría esconder el section anterior, es decir. La primera vez muestro el section1 y cuando apretó en otro elemento del menu y me gustaría esconder el section1 y mostrar el section4 por ejemplo.

Código Javascript:

$(".menucat").click(function() {
            var id = this.id;
            $('.active').removeClass('active');
            $( this ).addClass( 'active' );
            $('#sec'+id).show();
    })
 

[ArturoGallegos]

Justo lo acabo de hacer para un sitio hace unos dias, espero te sirva de ayuda

Código HTML:

<button class="btns" data-id="s1">Link 1</button>
<button class="btns" data-id="s2">Link 2</button>
<button class="btns" data-id="s3">Link 3</button>
 
<main>
  <section id="s1" class="active">Seccion 1</section>
  <section id="s2">Seccion 2</section>
  <section id="s3">Seccion 3</section>
</main>
 

Código Javascript:

const btns = document.querySelectorAll('.btns');
 
btns.forEach(element => {
  element.addEventListener('click', ({ currentTarget }) => {
    const id = currentTarget.getAttribute('data-id');
    document.querySelector('main .active').classList.remove('active');
    document.getElementById(id).classList.add('active');
  });
});
 

Código CSS:

section
  display: none
  &.active
    display: block
 

[manelmanel8]

Funciono perfecto, muchas gracias!

[Alexis88]

Otra solución con solo métodos de jQuery:

Código HTML:

<button>Botón 1</button>
<button>Botón 2</button>
<button>Botón 3</button>
  
<section>Sección 1</section>
<section>Sección 2</section>
<section>Sección 3</section>
 

Código Javascript:

$("section").hide();
 
$("button").on("click", function(){
  let elem = $("section").eq($("button").index(this));  
  $(".show").removeClass("show").addClass("hide").hide();  
  elem.removeClass("hide").addClass("show").show();
});
 

Se ocultan las secciones al inicio. Luego, cada vez que se pulse un botón, se tomará a la sección equivalente al botón pulsado (si se pulsó el primer botón, se toma a la primera sección). Si existe algún elemento con la clase show, se le quitará dicha clase, se le asignará la clase hide y se la ocultará. Finalmente, se le retirará la clase hide (si es que la tuviera, que es lo que sucederá luego de los primeros clics) al elemento seleccionado, se le asignará la clase show y se la mostrará.

DEMO