Skip to main content
se eliminaron 829 caracteres en el cuerpo; etiquetas editadas; título editado
Origen Enlace
Marcos
  • 35.6k
  • 7
  • 36
  • 70

Como ¿Como hago funcionar que solo se muestre un div?

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>
 

Como hago funcionar que solo se muestre un div

estoy queriendo hacer que de varios divs se vaya mostrando solo uno mediante la etiqueta "a" y estoy queriendo evitar usar javascript para no tener que usar tantas lineas 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 CSS:

    <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

<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>

¿Como hago funcionar que solo se muestre un div?

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>
 

Origen Enlace
docly
  • 53
  • 7

Como hago funcionar que solo se muestre un div

estoy queriendo hacer que de varios divs se vaya mostrando solo uno mediante la etiqueta "a" y estoy queriendo evitar usar javascript para no tener que usar tantas lineas 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 CSS:

    <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

<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>