單擊鏈接時如何在同一頁面上顯示框

Question

我正在制作基於php的Web應用程序。我想在使用Java腳本單擊鏈接時在同一頁面上顯示一個框。如何實現？ 我已經嘗試了以下代碼

<script>
function a()
{
    document.getElementsById("a").style.visibility="visible";
}
</script>

<a style="position:absolute;left:84%;top:32%;font-size:13px " href="" onclick="a()">
    Forgot Password?
</a>

<div id="a" style="position:absolute;left:30%;top:10%;width:40%;height:40%;background-color:lightgray;visibility:hidden">
</div>

Answer 1

您需要修復getElementsById不是復數，應該是getElementById

要停止點擊重新加載頁面，請設置href="javascript:a()"

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

<script>
function a()
{
    document.getElementById("a").style.visibility="visible";
}
function close_a()
{
    document.getElementById("a").style.visibility="hidden";
}
</script>

<a style="position:absolute;left:84%;top:32%;font-size:13px " href="javascript:a()">
    Forgot Password?
</a>

<div id="a" style="position:absolute;left:30%;top:10%;width:40%;height:40%;background-color:lightgray;visibility:hidden">
<a href="javascript:close_a()"><i class="fa fa-times-circle"></i> Close Me</a>
</div>

添加了關閉和字體效果的功能

Answer 2

文件方法錯誤。

它應該是getElementById ，您可以使用Google chrome DEV工具（在Windows上為Ctrl + shift + i ，在Mac上為⌘ + option + i ）來調試代碼。

Answer 3

將您的代碼更改為此，將顯示框：

<script>
function a()
{
    document.getElementById("a").style.display="block";
    return false;
}
</script>

<a style="position:absolute;left:84%;top:32%;font-size:13px " href="#" onclick="return a()">
    Forgot Password?
</a>

<div id="a" style="position:absolute;left:30%;top:10%;width:40%;height:40%;background-color:lightgray;display: none">
</div>

您的代碼中有錯誤。 getElementById是正確的，並且您的<a>鏈接刷新頁面，避免刷新的正確方法是更改onclick="a();" onclick="return a();" 因此javascript會尋找函式的返回，而在函式中，我們會傳回false，因此請保持頁面不變，並避免刷新。

此外，您可以將內容添加到框中：

<script>
function a()
{

    document.getElementById("a").style.display="block";
    document.getElementById("a").innerHTML="<b>your other contents inside the box</b>";
    return false;
}
</script>

<a style="position:absolute;left:84%;top:32%;font-size:13px " href="#" onclick="return a();">
    Forgot Password?
</a>

<div id="a" style="position:absolute;left:30%;top:10%;width:40%;height:40%;background-color:lightgray;display: none">
</div>