estoyEstoy queriendo hacer que de varios divsdiv
se vaya mostrando solo uno mediante la etiqueta "a"a
y estoy queriendo evitar usar javascript para no tener que usar tantas lineaslíneas poniendo display:nonedisplay:none
en las que no quiera ver cuando solo vea uno.
Trato
Trato de usar "target" para poner display:blockdisplay:block
a los que originalmente puse display:nonedisplay:none
considerando que la clase asignada usa display:flex pero no consigo que funcione siguiendo el ejemplo de MDN web docs
esto
Esto es en mi CSScódigo:
<style>
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;
}
</style>
codigo HTML
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>
<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>