如何通過Jquery或Javascript隱藏/顯示div？

Question

我有3個Divs（屏幕A，BC）..每個屏幕都有一個按鈕..我想在單擊按鈕時更改屏幕..如何使用javascript jquery no C＃來實現這一點...所有屏幕都必須具有相同的位置...

說明：

一次應顯示1格..如果屏幕A正在顯示，屏幕B和C應該被隱藏..單擊屏幕A的按鈕，屏幕A應該消失，屏幕B變得可見。按下時，應出現屏幕A，如果按下button2，則應出現屏幕C ...

  <div> This is Screen A<br /> <asp:Button ID="Button1" runat="server" Text="Go to Screen B" /> </div> <div> <div> This is Screen B</div> <br /> <asp:Button ID="Button2" runat="server" Text="Go to Screen A" /> <br /> <asp:Button ID="Button3" runat="server" Text="Go to Screen C" /> </div> <div> <div> This is Screen&nbsp; C</div> <br /> <asp:Button ID="Button4" runat="server" Text="Go to Screen B" /> </div> 

Answer 1

使用JavaScript嘗試一下。 提琴手演示

 function Show(id) { document.getElementById("divA").style.display = "none"; document.getElementById("divB").style.display = "none"; document.getElementById("divC").style.display = "none"; document.getElementById(id).style.display = "block"; } 

 .clsDiv { display: none; } 

 <div id="divA"> This is Screen A<br /> <input type="button" value="Go to Screen B" onClick="Show('divB')" /> </div> <div id="divB" class="clsDiv"> This is Screen B<br /> <input type="button" value="Go to Screen A" onClick="Show('divA')"/> <br /> <input type="button" value="Go to Screen C" onClick="Show('divC')"/> </div> <div id="divC" class="clsDiv"> <div> This is Screen&nbsp; C</div> <br /> <input type="button" value="Go to Screen B" onClick="Show('divB')" /> </div> 

Answer 2

給潛水課上課，並用jquery代碼給該課上課。

$(document).ready(function(){
    $("#Button1").click(function(){
        $("div-a class").hide();
        $("div-c class").hide();
        $("div-b class").show();
    });

   $("#Button2").click(function(){
        $("div-b class").hide();
        $("div-c class").hide();
        $("div-a class").show();
    });

   $("#Button2").click(function(){
        $("div-b class").hide();
        $("div-a class").hide();
        $("div-c class").show();
    });

   $("#Button2").click(function(){
        $("div-a class").hide();
        $("div-c class").hide();
        $("div-b class").show();
    });
});