Tengo una página larga, donde una sección es contenido con pestañas. Sin embargo, al mismo tiempo que se muestran las pestañas, me gustaría que otras secciones más abajo en la página estén visibles u ocultas, según la pestaña en la que se haga clic. Dado que cada pestaña mostraría alrededor de 4 contenedores más abajo en la página, me gustaría usar clases para esto en lugar de ID. Este es un resumen aproximado de lo que tengo hasta ahora (se eliminó el contenido de la pestaña, ya que es innecesario):
<div class="horisontal-tabs"> <ul class="tabs"> <li class="tab-label active person-sam" rel="tab1">Sam</li> <li class="tab-label person-bob" rel="tab2">Bob</li> <li class="tab-label person-jack" rel="tab3">Jack</li> <li class="tab-label person-kelly" rel="tab4">Kelly</li> </ul> </div> <div class="container-sam section-visible">Custom content only for Sam</div> <div class="container-bob section-hidden">Custom content only for Bob</div> <div class="container-jack section-hidden">Custom content only for Jack</div> <div class="container-kelly section-hidden">Custom content only for Kelly</div> <div class="container-sam section-visible">Other content for Sam</div> <div class="container-bob section-hidden">Other content for Bob</div> <div class="container-jack section-hidden">Other content for Jack</div> <div class="container-kelly section-hidden">Other content for Kelly</div>Y tengo jquery como se indica a continuación para cada persona, pero parece que no funciona y no sé cómo simplificarlo. La idea es que cuando haga clic en la pestaña de una persona, todas las secciones de las demás personas se ocultarán y la de esa persona será visible.
$('.horizontal-tabs ul.tabs li.person-sam').click(function (event) { $('.container-sam').removeClass('section-hidden').addClass('section-visible'); $('.container-sam.section-visible').removeClass('section-visible').addClass('section-hidden'); event.stopPropagation(); });He optado por no usar ID en las secciones y usar una clase en su lugar, porque será necesario mostrar varios a la vez, por lo que no serían únicos.
¡Cualquier consejo será muy apreciado! :)
Así que la pregunta es ¿cómo simplificar?
Lo que me viene a la mente es que no necesita clases activas e inactivas, solo necesita una de ellas, y luego puede hacer que la otra sea el estado predeterminado. Es decir, agregue una clase predeterminada .section a todas las secciones y use .section como el estado visible y agregue .section-hidden para ocultarlo, o use .section como el estado oculto y agregue .section-visible para mostrarlo.
Digamos que vas con .section-visible , el css sería algo como esto:
.section { display: none } .section.section-visible { display: block } Esto también simplificaría su javascript porque ahora puede restablecer todas las section y simplemente activar/desactivar las que necesita.
Si vas, de nuevo, con .section-visible , ejecuta esto al hacer clic:
$('.section').removeClass('section-visible'); // reset all sections $('.container-sam').addClass('section-visible'); // add visible class to specific sectionsPuede ver que solo necesita una clase adicional, no dos.
BONO 1: puedes usar BEM para hacerlo más claro.
BONIFICACIÓN 2: parece que tiene un oyente de clics para cada persona, pero en su lugar puede usar la API de conjunto de datos HTML y la función jQuery .data() para detectar el botón de la persona que está presionando. De esa manera, solo tendría un oyente de clics, y puede detectar en qué li se hizo clic al verificar el atributo de data- . Como <li data-person="sam">sam</li> y const containerSelector = `.container-${$(this).data('person')}`; . $(this) seleccionará el li en el que se hizo clic y .data('person') devolverá 'sam' . Entonces el selector será .container-sam .