两个div都有相同的类，但我想隐藏较低的div，点击第一个div的按钮后，第二个div变为可见
技术：
function myfunction() {
document.getElementById('bb').style.cssText = 'visibility:visible';
}.ab {
width: 200px;
height: 200px;
background: black;
}
#bb {
visibility: hidden;
}<script src="test.js"></script>
<div class="ab">
<input type="Email" placeholder="Email" /><br/>
<input type="password" placeholder="password" /><br/>
<button type="submit" value="submit" id="btn">Submit</button></div>
<div class="ab" id="bb" onclick="myfunction()">
<p>
<font color="white">you have succesfully registered</font>
</p>
<button type="submit">Return</button>
</div>
答案 0 :(得分：0)
如果要显示按钮上的第二个div，请单击。使用以下代码。
我已在第一次提交按钮的点击事件上移动了myfunction()。
function myfunction(){
document.getElementById('bb').style.cssText ='visibility:visible';
}.ab{
width:200px;
height:200px;
background:black;
}
#bb{
visibility:hidden;
}<div class="ab">
<input type="Email" placeholder="Email"/><br/>
<input type="password" placeholder="password"/><br/>
<button type="submit" value="submit" id="btn" onclick="myfunction()">Submit</button>
</div>
<div class="ab" id="bb" >
<p>
<font color="white">you have succesfully registered</font>
</p>
<button type="submit" >Return</button></div>
答案 1 :(得分：0)
通过添加点击事件
来尝试此操作
<html>
<body>
<script src="test.js"></script>
<div class="ab">
<input type="Email" placeholder="Email" />
<br/>
<input type="password" placeholder="password" />
<br/>
<button type="submit" value="submit" id="btn" onclick="showLowerDiv()">Submit</button>
</div>
<div class="ab" id="bb" onclick="myfunction()">
<p><font color="white">you have succesfully registered</font></p>
<button type="submit">Return</button>
</div>
<style>
.ab {
width: 200px;
height: 200px;
background: black;
}
#bb {
visibility: hidden;
}
</style>
<script>
function myfunction() {
document.getElementById('bb').style.cssText = 'visibility:visible';
}
function showLowerDiv() {
document.getElementById('bb').style.visibility = 'visible';
}
</script>
</body>
</html>
答案 2 :(得分：0)
你的onclick="myfunction()"应该在第一个按钮上，不是吗？并且代码中存在一些小错误/拼写错误，我在我的代码片段中修复了
function myfunction() {
document.getElementById('bb').style.cssText = 'visibility:visible';
};.ab {
width: 200px;
height: 200px;
background: black;
}
#bb {
visibility: hidden;
}<div class="ab" >
<input type="Email" placeholder="Email" /><br/>
<input type="password" placeholder="password" /><br/>
<button type="submit" value="submit" id="btn" onclick="myfunction()">Submit</button></div>
<div class="ab" id="bb" >
<p>
<font color="white">you have succesfully registered</font>
</p>
<button type="submit">Return</button>
</div>
答案 3 :(得分：0)
在jquery中你可以这样做：
$(function(){
$('#btn').on('click',function(){
$('#bb').show();
});
});.ab{
width:200px;
height:200px;
background:black;
}
#bb{
display:none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input type="Email" placeholder="Email"/><br/>
<input type="password" placeholder="password"/><br/>
<button type="submit" value="submit" id="btn">Submit</button></div>
<div class="ab" id="bb">
<p><font color="white">you have succesfully registered</font></p>
<button type="submit" >Return</button>
</div>
答案 4 :(得分：0)
如果我理解正确，您在单击提交按钮后想要显示第二个div（＆＃39; bb＆＃39;），然后单击第二个div中的返回按钮将隐藏它并返回第一个。
在这种情况下，HTML：
<div class="ab" id="ab">
<input type="Email" placeholder="Email"/><br/>
<input type="password" placeholder="password"/><br/>
<button type="button" value="submit" id="btn" onclick="submitForm();">Submit</button>
</div>
<div class="ab" id="bb">
<p><font color="white">you have succesfully registered</font></p>
<button type="button" onclick="returnToForm();">Return</button>
</div>
CSS将是：
<style>
.ab {
width:200px;
height:200px;
background:black;
}
#bb{
display: none;
}
<style>
注意：在打开脚本标记之前，您需要关闭<style>标记。
最后是JS：
<script>
function submitForm()
{
$('#ab').hide();
$('#bb').show();
}
function returnToForm()
{
$('#ab').show();
$('#bb').hide();
}
</script>
答案 5 :(得分：0)
要在单击“提交”按钮时显示第二个div，请将onclick="myfunction()"移至“提交”按钮。
function myfunction() {
console.log('show')
document.getElementById('bb').style.visibility = 'visible';
}.ab {
width: 200px;
height: 200px;
background: black;
}
#bb {
visibility: hidden;
}<script src="test.js"></script>
<div class="ab">
<input type="Email" placeholder="Email" /><br/>
<input type="password" placeholder="password" /><br/>
<button type="submit" value="submit" id="btn" onclick="myfunction()">Submit</button></div>
<div class="ab" id="bb">
<p>
<font color="white">you have succesfully registered</font>
</p>
<button type="submit">Return</button>
</div>
答案 6 :(得分：0)
看看你有什么需要..
function myfunction() {
document.getElementById("bb").style.display = "block";
}.ab {
width: 200px;
height: 200px;
background: black;
}
#bb {
display:none;
}<script src="test.js"></script>
<div class="ab">
<input type="Email" placeholder="Email" /><br/>
<input type="password" placeholder="password" /><br/>
<button type="submit" value="submit" id="btn" onclick="myfunction()">Submit</button></div>
<div class="ab" id="bb" >
<p>
<font color="white">you have succesfully registered</font>
</p>
<button type="submit">Return</button>
</div>
答案 7 :(得分：0)
试试这段代码......
<html>
<body>
<script src="test.js"></script>
<div class="ab">
<input type="Email" placeholder="Email"/><br/>
<input type="password" placeholder="password"/><br/>
<button type="submit" value="submit" id="btn" onclick="myFunction()">Submit</button></div>
<div class="ab" id="bb" >
<p><font color="white">you have succesfully registered</font></p>
<button type="submit" >Return</button></div>
<style>
.ab{
height:200px;
background:black;
}
#bb{
visibility:hidden;
}
</style>
<script>
function myFunction() {
document.getElementById('bb').style.cssText ='visibility:visible';
console.log("dfvgds");
}</script>
</body>
</html>