4

Estoy queriendo hacer que de varios div se vaya mostrando solo uno mediante la etiqueta a y estoy queriendo evitar usar javascript para no tener que usar tantas líneas poniendo display:none en las que no quiera ver cuando solo vea uno.

Trato de usar "target" para poner display:block a los que originalmente puse display:none considerando que la clase asignada usa display:flex pero no consigo que funcione siguiendo el ejemplo de MDN web docs

Esto es en mi código:

a {
  text-decoration: none;
}

#menu {
  display: flex;
  justify-content: space-around;
}

div:target {
  display: block;
}

.marco {
  border: 1px solid black;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  font-family: Calibri;
  padding: 5px;
  margin: 5px;
}

#falla_control {
  height: 175px;
  /*altura*/
  width: 675px;
  /*ancho*/
  display: none;
}

#actualizar_stb {
  height: 180px;
  /*altura*/
  width: 1000px;
  /*ancho*/
  display: none;
}
<div id="menu">
  <a href="#falla_control" id="btn-falla-control">Falla control remoto</a>
  <a href="#actualizar_stb" id="btn-actualizar-stb">Actualización Forzosa</a>
  <a href="#rest_config" id="btn-rest-conf">Restablecer config. de fábrica</a>
  <a href="#atv_subtitulos" id="btn-atv-subtitulos">Config. audio y subtítulos - deco Android</a>
  <a href="#conf_pin" id="btn-conf-pin">Config. Pin de compra</a>
</div>
<!-- -------------------------------------------------------------------------------------- -->


<div id="falla_control" class="marco">
  <h2 style="margin: 0; text-align: center">Falla control remoto</h2>
  <p>Te pido por favor que realices los siguientes pasos para mejorar la conectividad de tu control remoto:</p>
  <ul style="margin: 0">
    <li>Presiona las teclas 1 y 3 durante 6 segundos hasta que la luz parpadee.</li>
    <li>Después del parpadeo presiona ls teclas 9, 8 y 1 en ese orden, uno por uno.</li>
    <li>Luego de presionar esas teclas, probá presionando el botón de apagado.</li>
  </ul>
  <p>Quedo atento a tu retorno en caso de que el problema persista.</p>
</div>
<!-- ---------------------------------------------------------------------------------------- -->
<div id="actualizar_stb" class="marco">
  <h2 style="margin: 0; text-align: center">Actualización Forzosa deco SAGEM</h2>
  <p>Siento el mal rato, seguí por favor los siguientes pasos para que tu servicio mejore:</p>
  <ul style="margin: 0">
    <li>En la parte de atrás del deco ubicá el cable más fino, debería estar situado a la izquierda mirándolo de frente.</li>
    <li>Desenchufá el cable mencionado, luego mantené presionado el boton del frente del deco.</li>
    <li>Por último volvé a enchufar el mismo cable sin soltar el botón hasta que en la pantalla aparezca "Descargando actualizaciones, instalación en curso".</li>
  </ul>
  <p>Quedo atento a tu retorno en caso de que el problema persista.</p>
</div>

2
  • la cuestion es que al clickear en el <a> se muestra el id de referencia en la barra del enlace en el navegador, pero no se muestra
    – docly
    Commented el 7 ago. a las 14:20
  • 1
    Hola docly, bienvenido a Stack Overflow en español, te recomiendo realizar el recorrido de bienvenida para que aprendas como funciona la plataforma y de paso ganes tu segunda medalla. Saludos!
    – Marcos
    Commented el 7 ago. a las 14:35

1 respuesta 1

4

El error es que estas aplicando display:none en los selectores por id los cuales tienen mayor especificidad que el selector por target

Solución:

  • Eliminar display: none en los selectores por id
  • En el selector .marco agregar display: none
  • En el selector div:target agregar display: flex

Ejemplo:

a {
  text-decoration: none;
}

#menu {
  display: flex;
  justify-content: space-around;
}

div:target {
  display: flex;
}

.marco {
  border: 1px solid black;
  border-radius: 10px;
  display: none;
  flex-direction: column;
  font-family: Calibri;
  padding: 5px;
  margin: 5px;
}

#falla_control {
  height: 175px;
  /*altura*/
  width: 675px;
  /*ancho*/
}

#actualizar_stb {
  height: 180px;
  /*altura*/
  width: 1000px;
  /*ancho*/
}
<div id="menu">
  <a href="#falla_control" id="btn-falla-control">Falla control remoto</a>
  <a href="#actualizar_stb" id="btn-actualizar-stb">Actualización Forzosa</a>
  <a href="#rest_config" id="btn-rest-conf">Restablecer config. de fábrica</a>
  <a href="#atv_subtitulos" id="btn-atv-subtitulos">Config. audio y subtítulos - deco Android</a>
  <a href="#conf_pin" id="btn-conf-pin">Config. Pin de compra</a>
</div>
<!-- -------------------------------------------------------------------------------------- -->


<div id="falla_control" class="marco">
  <h2 style="margin: 0; text-align: center">Falla control remoto</h2>
  <p>Te pido por favor que realices los siguientes pasos para mejorar la conectividad de tu control remoto:</p>
  <ul style="margin: 0">
    <li>Presiona las teclas 1 y 3 durante 6 segundos hasta que la luz parpadee.</li>
    <li>Después del parpadeo presiona ls teclas 9, 8 y 1 en ese orden, uno por uno.</li>
    <li>Luego de presionar esas teclas, probá presionando el botón de apagado.</li>
  </ul>
  <p>Quedo atento a tu retorno en caso de que el problema persista.</p>
</div>
<!-- ---------------------------------------------------------------------------------------- -->
<div id="actualizar_stb" class="marco">
  <h2 style="margin: 0; text-align: center">Actualización Forzosa deco SAGEM</h2>
  <p>Siento el mal rato, seguí por favor los siguientes pasos para que tu servicio mejore:</p>
  <ul style="margin: 0">
    <li>En la parte de atrás del deco ubicá el cable más fino, debería estar situado a la izquierda mirándolo de frente.</li>
    <li>Desenchufá el cable mencionado, luego mantené presionado el boton del frente del deco.</li>
    <li>Por último volvé a enchufar el mismo cable sin soltar el botón hasta que en la pantalla aparezca "Descargando actualizaciones, instalación en curso".</li>
  </ul>
  <p>Quedo atento a tu retorno en caso de que el problema persista.</p>
</div>

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.