目前我有一些看起来像这样的代码;
<div id="welcome">
<div style="text-align: center;">
<h1 style="margin-bottom: 0;">Welcome</h1>
<hr>
<p>Hi, would you like to sign up or keep watching?</p>
<button id="intro_signup_button" type="text" onclick="**HERE**">SIGN UP</button>
<button id="intro_back_button" type="text" onclick="document.getElementById('welcome').style.display='none'">KEEP WATCHING</button>
</div>
</div>
<div id="signup">
<div style="text-align: center;">
<p>texttextext</p>
</div>
</div>
因此,当我单击注册按钮时,我希望div更改为下面的注册div,但使用与关闭窗口相同的编码类型(如果可能)。我知道很明显,我是初学者,但我一直在各处搜索并玩弄不同的技巧,但我无法弄明白!
我真的很感激任何帮助:)
谢谢!
答案 0 :(得分:1)
真的很简单:
#signup {
display: none;
}
<div id="welcome">
<div style="text-align: center;">
<h1 style="margin-bottom: 0;">Welcome</h1>
<hr>
<p>Hi, would you like to sign up or keep watching?</p>
<button id="intro_signup_button" type="text" onclick="document.getElementById('signup').style.display='block';">SIGN UP</button>
<button id="intro_back_button" type="text" onclick="document.getElementById('welcome').style.display='none';">KEEP WATCHING</button>
</div>
</div>
<div id="signup">
<div style="text-align: center;">
<p>texttextext</p>
</div>
</div>
如果您想要在显示注册层之前隐藏欢迎图层的版本:
#signup {
display: none;
}
<div id="welcome">
<div style="text-align: center;">
<h1 style="margin-bottom: 0;">Welcome</h1>
<hr>
<p>Hi, would you like to sign up or keep watching?</p>
<button id="intro_signup_button" type="text" onclick="document.getElementById('signup').style.display='block';document.getElementById('welcome').style.display='none'">SIGN UP</button>
<button id="intro_back_button" type="text" onclick="document.getElementById('welcome').style.display='none';">KEEP WATCHING</button>
</div>
</div>
<div id="signup">
<div style="text-align: center;">
<p>texttextext</p>
</div>
</div>
答案 1 :(得分:0)
使用Jquery:
$("#intro_signup_button").click(function() {
$("#signup").show();
});
$("#intro_back_button").click(function() {
$("#signup").hide();
});
$("#intro_signup_button").click(function() {
$("#signup").show();
});
$("#intro_back_button").click(function() {
$("#signup").hide();
});
#signup {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="welcome">
<div style="text-align: center;">
<h1 style="margin-bottom: 0;">Welcome</h1>
<hr>
<p>Hi, would you like to sign up or keep watching?</p>
<button id="intro_signup_button">SIGN UP</button>
<button id="intro_back_button">KEEP WATCHING</button>
</div>
</div>
<div id="signup">
<div style="text-align: center;">
<p>show sign up</p>
</div>
</div>