リンクをクリックしたとき同じページにボックスを表示する方法

Question

私はPHPベースのWebアプリケーションを作っています。リンクをクリックしたときに同じページに表示されるようにしたいと思います。この？？私はあなたがgetElementsByIdを修正するために必要な以下のコード

<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

を試してみました はをクリックリロードページを停止するには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> 

を設定する機能を追加しました閉じるとfont awesome

Answer 2

あなたのコードをこれに変更するとボックスになります表示される：

<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がファンクションを返すようにします。

また、あなたのボックスにコンテンツを追加することができます。ドキュメントの

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

Answer 3

方法が間違っています。

それはgetElementByIdする必要があり、あなたは、GoogleのクロムDEVツールを使用することができます（はCtrl + シフト + 私は窓に、私はMac上で⌘ + オプション + ）あなたのコードをデバッグします。