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

【问题标题】：Using an anchor to show/hide divs in an asp mvc app在 asp mvc 应用程序中使用锚显示/隐藏 div
【发布时间】：2021-12-02 02:28:30
【问题描述】：

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

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

JScipt：

函数 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 并且没有其他任何事情发生，请问我在这里做错了什么？

【问题讨论】：

标签： javascript html asp.net-core razor

【解决方案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>

让我知道这是否适合您

【讨论】：

只要有一个div可以控制，代码就可以工作。更正后，onClick() 会导致闪烁并返回到原始状态，就好像它正在调用自身一样。我尝试使用不同命名的函数，但仍然没有更好的结果。
这可能是个问题，因为它是 _Layout 在 asp net MVC 中的一个页面？
你可以创建多个函数！

【解决方案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;
        }

结果：

【讨论】：