使用錨點在 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