使用锚点在 asp mvc 应用程序中显示/隐藏 div
[英]Using an anchor to show/hide divs in an asp mvc app
问题描述
In my Asp MVC program I can toggle a div with a button.
在我的 Asp MVC 程序中，我可以用一个按钮来切换一个 div。 cshtml: cshtml：
<button onclick="ShowPubs()"> Click to show or hide</button>
JScipt:脚本：
function ShowPubs() {函数 ShowPubs() {
var x = document.getElementById("myPubs");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
} }
and this works fine,这工作正常，
however, when trying to use links as in this code: cshtnl:但是，当尝试使用此代码中的链接时：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>
using this JavaScript:使用这个 JavaScript：
function ShowAbout() {函数 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;
} }
The page url adds the # to the url and nothing else happens, what am I doing wrong here, please?页面 url 将 # 添加到 url 并且没有其他任何事情发生，请问我在这里做错了什么？
2 个解决方案
解决方案1
0 2021-10-13 16:08:20
In else you use y.style.display="b;pck" which is not correct way .在其他情况下，您使用y.style.display="b;pck"这不是正确的方式。 it must be block ;它必须是block ；
You need something like this .你需要这样的东西。
<!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> Let me know if this works for you让我知道这是否适合您
解决方案2
0 2021-10-14 01:50:41
- change
getElementsByIdtogetElementById将getElementsById更改为getElementById - change
AbourHidetoAboutHide将AbourHide更改为AboutHide - change
b;pcktoblock更改b;pck以block
Code:代码：
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;
}
result:结果：
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.