Reputation: 105
I have 3 Divs (screens i.e A ,B C ) ..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 C</div>
<br />
<asp:Button ID="Button4" runat="server" Text="Go to Screen B" />
</div>
Upvotes: 0
Views: 245
Reputation: 3729
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 C</div>
<br />
<input type="button" value="Go to Screen B" onClick="Show('divB')" />
</div>
Upvotes: 2
Reputation: 69
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();
});
});
Upvotes: 1