Question

我有3个Div（屏幕即A，BC）..每个屏幕都有一个按钮..我想在按钮点击时更改屏幕..如何通过使用javascript jquery no C＃来实现...所有屏幕必须具有相同的位置...

解释：

一次显示1个div。如果屏幕A显示屏幕B且C应隐藏..按钮点击屏幕A屏幕A应消失，屏幕B变为可见屏幕B屏幕B有两个如果按钮1按下按钮屏幕A应该出现，如果按钮2按下屏幕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尝试此操作。 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

让课程潜水并以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();
    });
});

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

2 个答案: