[英]How to hide/show div by Jquery or Javascript?
我有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 C</div> <br /> <asp:Button ID="Button4" runat="server" Text="Go to Screen B" /> </div>
使用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 C</div> <br /> <input type="button" value="Go to Screen B" onClick="Show('divB')" /> </div>
给潜水课上课,并用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();
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.