Avisos
Vaciar todo

Fallo de Conmutación de Pestañas/Capas: El Contenido No Cambia (JQuery/CSS Anulado) y Causa Scroll Inesperado (go-top)

5 Respuestas
2 Usuarios
0 Reactions
9 Visitas
Respuestas: 3
Active Member
Topic starter
 

Hola a todos,

Tengo un problema que no consigo resolver con DiVi. Basicamente es hacer una serie de modulos visibles u ocultos dentro de una columna (Contenido-derecha), en función del link pinchado en otra columna (Indice-izda).

Basicamente es una columna con 10 modulos de texto verticales visibles que representan un indice de contenidos, y lo que se pretende es que en función del modulo "pinchado", se visualice el contenido en una columna a su derecha con la altura de toda la fila, y si es necesario aplicar controles para visualizar el contenido que no quepa en dicha altura, contenido que está en otros 10 modulos, y que deben hacerse visible u ocultos en función del titulo del indice seleccionado. 

He probado todo tipo de codigo CSS y/o Jqueries, pero no consigo que funcione. Ya derrotado, me cogí a ChatGPT pro, y facilitandole incluso el codigo completo de la pagina (descargandola con Chrome) para ver como DiVi trataba el codigo incrustado, no hemos sido capaces de hacerlo funcionar (Con lo sencillo que es hacer un JS que maneje capas en una pagina HTML normal y corriente!). 

Por lo que deducimos DiVi está modificando o bloqueando el codigo con posterioridad a ser procesado.

Resumiendo, el problema es el siguiente: 

1. ESTRUCTURA DE LA PÁGINA
* Columna Derecha (Contenedor 'contenedor-capas'): Tiene position: relative; y min-height definidos.
* Módulos de Contenido (Clase 'contenido-capa'): Tienen display: none; y position: absolute;

2. PRUEBAS FALLIDAS (CRÍTICAS)
Hemos agotado todas las soluciones CSS y JQuery, lo que apunta a un conflicto interno de Divi:

A. Método CSS :target (Anclas URL)
* Resultado Confirmado: La URL cambia (#tema-2-contenido), pero el contenido NO se muestra.
* Implicación: La regla CSS ':target { display: block !important; }' es anulada por el CSS interno de Divi/WordPress.

B. Métodos JQuery (Índice y Atributos de Datos)
* Resultado Confirmado: El script de conmutación se ejecuta (el scroll se detiene en 'go-top'), pero la función de JQuery para mostrar el contenido ('.show()') es ineficaz o el índice de los módulos es incorrecto.
* Implicación: Divi está inyectando etiquetas que rompen el conteo de índices o un script está interfiriendo con la función .show().

La pagina está publicada, y el fallo está en una columna de 10 tratamientos (lado izquierdo, con el contenido de la columna derecha oculto)

A alguien se le ocurre algo ?

 

Gracias por adelantado

 

Contenido solo visible a usuarios registrados


 
Respondido : 01/12/2025 4:29 pm
Tags del tema
Karen Rios
Respuestas: 19040
Illustrious Member Moderator
 

Hola Naval, 

Entiendo que lo que quieres es añadir una tarjeta que al hacer clic revelen un contenido específico, ten en cuenta que Divi esta construir con una estructura especifica que vincula cada uno de sus módulos o bloques, es por ello que no podemos añadir un código como tal que modifique algo especifico en ellos. 

Dicho esto, has probado añadir lo que deseas mediante el bloque de código, solo añadiendo tu código personalizado y verificar si de esta forma reacciona. 

De manera general puedes darle un vistazo al siguiente artículo donde describen como configurar algo parecido a lo que deseas →  [hiden] https://divihype.com/how-to-reveal-divi-content-on-clicking-a-button/ [/hiden]

¿Si no es esto lo que buscas puedes enviarnos un ejemplo sobre lo que deseas incorporar? de esta forma podemos revisar un poco con mayor detalle

Un Saludo

 

 

 
Respondido : 01/12/2025 5:10 pm
Respuestas: 3
Active Member
Topic starter
 

Hola Karen,

Claro que he añadido lo que deseo en un modulo de código, de hecho ahora está asi, en la linea anterior a la que contiene el problemilla.

Ademas, como nunca funcionaba se han probado todo tipo de clases CSS, modificado la forma en que el script trataba todo, cambiar el modulo de codigo de sitio, añadirle un retraso en la carga para que se ejecutara al final de la carga del resto del codigo de la pagina, etc. sin conseguir el objetivo.

Lo que se quiere es muy sencillo (en teoria, o eso pensaba yo que lo iba a ser usando Divi)

2 columnas, cada una de ellas con el mismo numero de modulos, de tal modo que los de la columna derecha permanezcan ocultos y en la misma posicion (solapados), y solo se haga visible el que contenga la informacion correspondiente a la opcion seleccionada.  

|---------------------|      |------------------------|

| Tema 1                |      |                               |

|---------------------|      |      Contenido           |

| Tema 2                |      |           del                |

|---------------------|      |         tema               |

| Tema 3                |      |      seleccionado       |

|---------------------|      |                               |

| Tema 4                |      |                               |

|---------------------|      | ----------------------- |

 

Al cargar la página, se muestran los titulos (temas 1....4, en 4 modulos, uno debajo de otro), y por defecto se hace visible el contenido del tema 1 en el modulo de texto de la columna derecha.

Total, que lo que pretendo y no consigo, es que al pinchar en el tema 2, el contenido del tema 1 se oculte, y se muestre solo el contenido del tema 2, y así sucesivamente cada vez que cambio de tema. Y aunque todavía no me he metido con lo siguiente, de paso que si el contenido desborda el tamaño del modulo de texto de la columna derecha (donde va el contenido), que aparezca algun cursor para desplazarse arriba/abajo dentro del contenido. 

Pues otro saludo! 


 
Respondido : 01/12/2025 5:48 pm
Respuestas: 3
Active Member
Topic starter
 

Pego aquí una imagen para que se entienda mejor, que el grafico anterior me ha salido un churro

Imagen1

 


 
Respondido : 01/12/2025 6:11 pm
Karen Rios
Respuestas: 19040
Illustrious Member Moderator
 

Hola Naval,

De acuerdo a tu imagen esto has pensado construirlo con tabs o pestañas de Divi? esto puedes probar construirlo con un acordeón

También existen otros módulos que te permiten crear tabs avanzados como → https://divisupreme.com/features/divi-supreme-advanced-tabs-module/   

U otros adicionales como → https://www.elegantthemes.com/modules/advanced-tabs/

Puedes revisar estos y comprobar si alguno te permite añadir lo que necesitas

Un Saludo 

 

 
Respondido : 01/12/2025 9:09 pm