Usando un ancla para mostrar / ocultar divs en una aplicación asp mvc

0

En mi programa Asp MVC puedo alternar un div con un botón. cshtml:

<button onclick="ShowPubs()"> Click to show or hide</button>

JScipt:

function ShowPubs () {

var x = document.getElementById("myPubs");

if (x.style.display === "none") {

    x.style.display = "block";

} else {

    x.style.display = "none";

}

}

y esto funciona bien

sin embargo, al intentar usar enlaces como en este código: cshtnl:

<div id="AboutShow" style="display:block">
   Show the hidden piece <a href="#" onclick="ShowAbout();">Show &#9660;</a>

  </div>

  <div id="AboutHide" style="display:none">
   Hide these details <a href="#" onclick="ShowAbout();">Hide &#9650;</a>

   A lot more stuff

  </div>

usando este JavaScript:

function ShowAbout () {

var x = document.getElementById("AboutShow");

var y = document.getElementsById("AbourHide");

if (x.style.display === "none") {

    x.style.display = "block";

    y.style.display = "none";

} else {

    x.style.display = "none";

    y.style.display = "b;pck";

}

return false;

}

La URL de la página agrega el # a la URL y no pasa nada más, ¿qué estoy haciendo mal aquí, por favor?

0

De lo contrario, usa la y.style.display="b;pck"que no es la forma correcta . debe ser block;

Necesitas algo como esto .

  <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    #myDIV {
      width: 100%;
      padding: 50px 0;
      text-align: center;
      background-color: lightblue;
      margin-top: 20px;
    }
    </style>
    </head>
    <body>



    <a href="#" onclick="myFunction()">Try it</a>

    <div id="myDIV">
    This is my DIV element.
    </div>


    <script>
    function myFunction() {
      var x = document.getElementById("myDIV");
      if (x.style.display === "none") {
        x.style.display = "block";
      } else {
        x.style.display = "none";
      }
    }
    </script>

    </body>
    </html>

Hazme saber si esto funciona para ti

3
  • El código funciona siempre que haya un div para controlar. Cuando se corrige, onClick () provoca un parpadeo y vuelve al estado original como si se estuviera recuperando. Intenté usar funciones con nombres diferentes, pero aún así no obtuve un mejor resultado. 15 oct a las 13:06
  • ¿Podría ser esto un problema porque es una página dentro de un _Layout en asp net MVC? 15 oct a las 13:08
  • ¡Puedes crear múltiples funciones!
    Nishant
    15 oct a las 16:25
0
  1. cambiar getElementsByIdagetElementById
  2. cambiar AbourHideaAboutHide
  3. cambiar b;pckablock

Código:

function ShowAbout() {

            var x = document.getElementById("AboutShow");

            var y = document.getElementById("AboutHide");

            if (x.style.display === "none") {

                x.style.display = "block";

                y.style.display = "none";

            } else {

                x.style.display = "none";

                y.style.display = "block";

            }

            return false;
        }

resultado: ingrese la descripción de la imagen aquí