Javascript 在显示和隐藏div时遇到问题_Javascript_Jquery_Html_Css

Javascript 在显示和隐藏div时遇到问题

javascript jquery html css

Javascript 在显示和隐藏div时遇到问题,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我的代码：我目前对javascript/html/css还不太熟悉，我很难让主菜单页面在单击开始按钮时消失，然后让单词Test在菜单消失后立即出现。任何建议都会有帮助！另外，如果可能的话，你能解释一下它是如何工作的吗 <menu> <div id="menu"> <body background=""> <divcenter> <font color="blue"><font size="5"><center&g

我的代码：

我目前对javascript/html/css还不太熟悉，我很难让主菜单页面在单击开始按钮时消失，然后让单词Test在菜单消失后立即出现。任何建议都会有帮助！另外，如果可能的话，你能解释一下它是如何工作的吗

<menu>
<div id="menu">
  <body background="">
<divcenter>
<font color="blue"><font size="5"><center><h2> Realm of Rilthalk </h2></center></font></font>
<font color="magenta"><font size="5"><center><h3>The Origin Story</h3></center></font></font>
</divcenter>
<divbottomleft> <input type="button" id="start" class="hide" value = "Start Game"/> </divbottomleft>
<divbottomright><input type="button" id="quit" value = "Quit"/>
</divbottomright>
</body>
</div>
</menu>
<game>
<div id="game" class="toshow" style="display:none" >
<divcenter><font color="jade"><H1><center> Test </center></H1></font>
</divcenter>
</div>
</game>
<script>
$(document).ready(function(){
$(".hide").click(function(){
    $(this).parents("menu").hide();
        $("game").parents("game").toggle();    
});
});

</script>

您的想法是正确的，尽管jQuery只需要稍作修改。它实际上非常简单；您只需隐藏菜单并通过相同的单击功能显示游戏本身：

$（文档）.ready（函数（）{
$（“.hide”）。单击（函数（）{
$（“#菜单”）.hide（）；
$（“#游戏”）.show（）；
});
});
divcenter{
高度：200px；
宽度：400px；
位置：固定；
最高：50%；
左：50%；
利润上限：-100px；
左边距：-200px；
}
左下角{
位置：固定；
最高：50%；
左：50%；
边缘顶部：75px；
左边距：-200px；
}
右下角{
位置：固定；
最高：50%；
左：50%；
边缘顶部：75px；
左边距：130像素；
}

里尔塔克王国
起源故事
试验
当你点击开始按钮时，你要做的是，当你点击开始按钮时，菜单会消失，然后游戏会出现，但游戏目前是单词Test的占位符。$（“.hide”）。点击（function（）{$（“#menu”）.hide（）$（“#game”）.show（））；希望这对你有帮助，没问题；很高兴听到这个解决方案似乎对您有效。一旦您确认此解决方案解决了您的问题，请不要忘记通过单击投票按钮下方的灰色复选框将此解决方案标记为正确，这会将其从“未回答问题”队列中删除，并为提问者和回答问题者授予声誉。当然，这么说，你没有义务把我的答案（或任何其他答案）标记为正确，尽管这确实有助于保持事情顺利进行：）
divcenter {
height: 200px;
width: 400px;
position: fixed;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -200px;
}

divbottomleft {
position: fixed;
top: 50%;
left: 50%;
margin-top: 75px;
margin-left: -200px;
}

divbottomright{
position: fixed;
top: 50%;
left: 50%;
margin-top: 75px;
margin-left: 130px;
}