如何通过Jquery或Javascript隐藏/显示div？

Question

I have 3 Divs (screens ie A ,BC ) ..each screen has a button..I want to change the screen on button click..How can this be achieved by using javascript jquery no C#...All the screen must have the same location...

Explanantion :

1 div should be displayed at a time .. If Screen A is displaying Screen B and C should be hidden.. on button click of screen A the Screen A should get disappear and Screen B becomes visible .. Screen B has two button if button1 is press Screen A should appear and If button2 is press Screen C should appear...

  <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

Try this using JavaScript . FiddlerDEMO

 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

Give classes to dives and give that class in jquery code.this will work.

$(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();
    });
});