使用锚点在 asp mvc 应用程序中显示/隐藏 div

Question

在我的 Asp MVC 程序中，我可以用一个按钮来切换一个 div。 cshtml：

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

脚本：

函数 ShowPubs() {

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

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

    x.style.display = "block";

} else {

    x.style.display = "none";

}

}

这工作正常，

但是，当尝试使用此代码中的链接时：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>

使用这个 JavaScript：

函数 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;

}

页面 url 将 # 添加到 url 并且没有其他任何事情发生，请问我在这里做错了什么？

Answer 1

在其他情况下，您使用y.style.display="b;pck"这不是正确的方式。 它必须是block ；

你需要这样的东西。

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

让我知道这是否适合您

Answer 2

将getElementsById更改为getElementById
将AbourHide更改为AboutHide
更改b;pck以block

代码：

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

结果：

使用锚点在 asp mvc 应用程序中显示/隐藏 div

问题描述

2 个解决方案

解决方案1
0 2021-10-13 16:08:20

解决方案2
0 2021-10-14 01:50:41

使用锚点在 asp mvc 应用程序中显示/隐藏 div

问题描述

2 个解决方案

解决方案1 0 2021-10-13 16:08:20

解决方案2 0 2021-10-14 01:50:41

解决方案1
0 2021-10-13 16:08:20

解决方案2
0 2021-10-14 01:50:41