0

como condiciono que un "div:target" actue solo para una seccion de etiquetas "a" sin que entre en clonflicto con el comportamiento de otras etiquetas "a"?

Lo que hace el div:target es hacer visible un div vacio pero que sirve de referencia para una funcion que forma una ruta con el id de ese div, la etiqueta "a" de esa seccion apunta a ella con el href="id", sin embargo, al hacer click en otra que no apunta nada ya que tiene href="#" hace que el div que era visible desaparezca.

Necesito que ese div se mantenga visible para que una funcion especifica peuda formar esa ruta para lo que estoy haciendo y que no cause ninguna falla al usar las otras etiquetas "a" como botones de la manera en que quiero emplearlo.

.secciones div {
  display: none
}

.secciones div:target {
  display: block
}
<a href=#uno>uno</a>
<a href=#dos>dos</a>
<a href=#tres>tres</a>
<div class=secciones>
  <div id=uno>seccion uno</div>
  <div id=dos>seccion dos</div>
  <div id=tres>seccion tres</div>
</div>
<a href=#>otro a</a>

8
  • pon un ejemplo del HTML que estás describiendo. Así, de buenas a primeras, no se entiende.
    – ffflabs
    Commented el 2 dic. a las 16:45
  • siento que será complicado simplificar el html que estoy usando como para ponerlo de ejemplo, lo intentaré
    – docly
    Commented el 2 dic. a las 16:46
  • 1
    Sin un ejemplo que podamos toquetear y modificar, cómo pretendes que te ayudemos?? No ejecutamos html / js mentalmente, y si a ti te resulta complicado hacer un ejemplo, imagínate lo que nos estás pidiendo... que para ayudarte repliquemos exactamente tu código para poder modificarlo como tú necesitas?? Tú te das cuenta de que literalmente es imposible hacer eso a partir de tu descripción, no?? Porque hay mil maneras de hacer las cosas, lo que hagamos nosotros no va a ser idéntico a lo que tienes tú... con lo cual no es posible ayudarte. O pones un ejemplo mínimo verificable o tu pregunta acabará cerrada.
    – Benito-B
    Commented el 2 dic. a las 17:14
  • 1
    el current active target es único y un href=# cambia el target a ... # . así que dependiendo de cómo armes el resto del html+css dependerá la solución a aplicar. un href=# podría ser signo de que estas usando javascript y eventos onclick; si ese es el caso pues no hace falta complicarse con un pure css div:target visible y pasar a eventos javascript; o usar un truco del tipo selectores hermanos por ej es.stackoverflow.com/a/187565/81450 aprovechando los elementos html "con memoria" onda checkboxes y radio Commented el 2 dic. a las 17:43
  • 1
    eso es exactamente lo que queria explicar que me pasaba, gracias... le terminé preguntando a copilot como podia conseguir lo que expresé en mi pregunta y me sugirio lo mismo, recurir a javascript. En unos minutos pondré mi respuesta de como lo solucioné
    – docly
    Commented el 2 dic. a las 17:49

2 respuestas 2

2

El elemento Anchor (<a>) es un ancla/enlace a otro elemento de la misma página o a otra página, por lo que NO enlazar a nada, es decir <a href="#">, tiene poco sentido. Habitualmente, y a mi parecer de forma incorrecta, esto se usa cuando al Anchor se le da funcionalidad de <button>, pero es que para eso mejor usar un <button> directamente.

Por otro lado, veo que quieres hacer una especia de tabs, yo uso un details con algo de CSS para ello y sin la necesidad de javascript

No obstante, en el siguiente ejemplo incluyo javascript para mostrar cómo obtener el ID del elemento visible, que entiendo es la necesario para tu caso particular.

// Ejemplo de como obtener el id del elemento que está visible
function mostrarId(){
  const selected = document.querySelector(".tab details[open] .tab-content");
  console.log(selected.id);
}
.tab {
  display: flex;
  height: 100px;
  position: relative;
}

.tab details summary {
  height: 30px;
  list-style: none;
  padding: 0 0.5em;
  align-content: center;
  cursor: pointer;
  position: relative;
}
.tab details[open] summary {
  pointer-events: none;
  color:red;
}


.tab .tab-content {
  position: absolute;
  top: 30px;
  left: 0;
  right: 0;
  bottom: 0;
  border: 1px solid black;
  padding: 10px;
}
<div class="tab">
  <details name="tab1" open>
    <summary>contenido 1</summary>
    <div id="contenido1" class="tab-content">1111111111</div>
  </details>

  <details name="tab1">
    <summary>contenido 2</summary>
    <div id="contenido2" class="tab-content">2222222222</div>
  </details>

  <details name="tab1">
    <summary>contenido 3</summary>
    <div id="contenido3" class="tab-content">3333333333</div>
  </details>
</div>

<button onclick="mostrarId()">Mostrar ID Seleccionado</button>

<p>Tambien funciona con anchors:</p>
<a href="#contenido1">contenido 1</a>
<a href="#contenido2">contenido 2</a>
<a href="#contenido3">contenido 3</a>

2
  • investigué un poco al respecto de la etiqueta details por lo que me dio una idea para hacer un menu desplegable más sencillo para acceder a las opciones de perfil al clickear sobre el nombre como cerrar sesion, opciones (detalles de cambio de contraseña y descripcion) u otras funciones integradas para uso en un equipo de trabajo. Seguiré investigando más al respecto
    – docly
    Commented hace 4 horas
  • lo que estoy haciendo en mi página es un indice o glosario, que al seleccionar el item del menu desplegado, se haga visible el div de dicho contenido y luego una funcion asigada al boton del item toma el id del div que lo contiene y está visible, el div correspondiente y mediante un ajax lea un archivo txt que se incrusta en dicho div. Mediante una funcion de complementos en php hago que en la misma página pueda editarse con un rol de adminstrados de modo que intercale entre incrustarlo en el div, o incrustarlo en un textarea para que se pueda editar
    – docly
    Commented hace 4 horas
0

lo que intentaba hacer fue que el div:target no hiciera desaparecer el div que se volvió visible mediante otra etiqueta a con href="id" al hacer click en una etiqueta "a" que tuviera href="#" Para conseguirlo tuve que pasar directamente a javascript en vez de usar el div:target

$(".caso").on("click", function() {
  var id = $(this).attr('href');
  $(".caja_speech").hide();
  $("#" + id).show();
  $(".caja_speech").html("este texto se muestra mediante un ajax y corresponde al archivo cuyo nombre es " + id);
});
$(".categoria").on("click", function() {
  var selector = $(this).prop('id');
  $(".secciones").hide();
  $("#caja-" + selector).show();
});
.caja_speech {
  border: 1px solid black;
  border-radius: 10px;
  display: none;
  font-family: Calibri;
  padding: 5px;
  height: auto;
  /*altura*/
  width: auto;
  /*ancho*/
}

#caja-seccion2 {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<a href="#" id="perfil">Perfil</a>

<a href="#" class="categoria" id="seccion1">Seccion 1</a>
<a href="#" class="categoria" id="seccion2">Seccion 2</a>

<div id="caja-seccion1" class="secciones">
  <a href="contenido1" class="caso">texto1</a>
  <a href="contenido2" class="caso">texto2</a>
  <a href="contenido3" class="caso">texto3</a>

  <div id="contenido1" class="caja_speech"></div>
  <div id="contenido2" class="caja_speech"></div>
  <div id="contenido3" class="caja_speech"></div>
</div>
<div id="caja-seccion2" class="secciones"> aqui se muestra el contenido de la seccion 2</div>

de esta forma al entrar a la seccion 2, se mantiene el contenido de la seccion 1 intacta y la funcion sigue con normalidad (hay un fallo en el ejemplo que no se manifiesta en mi programa, el ejemplo entero desaparece, no se si sea solo un error de mi pc o algo funcione mal, aunque el ejemplo funcione bien)

5
  • 1
    Ehhh yo presiono Sección 1 y aparece, luego presiono Sección 2 y desaparece Sección 1 y pasa a mostrar lo de Sección 2 . No hay nada que se mantenga como tu señalas
    – Yussef
    Commented el 2 dic. a las 23:06
  • @Yussef creo que se refiere a que cuando pulsás sobre texto1, texto2 o texto3, aparece brevemente el texto y luego queda en blanco el snippet.
    – padaleiana
    Commented el 3 dic. a las 10:31
  • 1
    je, en el ejemplo las cosas desaparecen pq los href vana rutas relativas contenido1 -> laurlactual/contenido1 no a ids, cambiale a #contenido1 o usa un attr data- por ej data-section o data-targetid o un prevent default en el onclick Commented el 3 dic. a las 16:28
  • el problema que planteaba es que, teniendo 2 botones, cuyos divs tienen un id que coincidian con el href="id" de la etiqueta "a", hacen aparecer dicho div mientras que los otros se mantienen con la propiedad display: none ocultos, pero al querer pasar a otra sección usando otra etiqueta "a" con un href="#" hacia que desapareciera el div pero que se mantuviera visible igual el menu que lo necesitaba...
    – docly
    Commented el 3 dic. a las 23:12
  • la página usa una ruta para un ajax que se forma a través del id del div visible del contenedor del contenido y el id del div visible del menú al que pertenece, lo que hace que la página no funcione bien y el cliente no sepa porqué.
    – docly
    Commented el 3 dic. a las 23:12

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.