0
268
ViewsUso de un ancla para mostrar/ocultar divs en una aplicación asp mvc
En mi programa Asp MVC, puedo alternar un div con un botón. cshtml:
<button onclick="ShowPubs()"> Click to show or hide</button>JScipt:
función 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 ▼</a> </div> <div id="AboutHide" style="display:none"> Hide these details <a href="#" onclick="ShowAbout();">Hide ▲</a> A lot more stuff </div>usando este JavaScript:
función MostrarSobre() {
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 sucede nada más, ¿qué estoy haciendo mal aquí, por favor?
·
Juan Pablo Isaza
2 answers
Answer question0
De lo contrario, usa 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
·
Juan Pablo Isaza
Report
0
- cambiar
getElementsByIdagetElementById - cambiar
AbourHideaAboutHide - 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: 
·
Juan Pablo Isaza
Report
Answer question