Question

我的代码：https://jsfiddle.net/Metalnoypi/d7ocf929/#&togetherjs=HD16R9BLLF

我目前是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>

我的CSS代码是：

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;
}

Answer 1

你有正确的想法，虽然你的jQuery只需要稍微修改一下。它实际上非常简单;您所要做的就是隐藏菜单并通过相同的点击功能显示游戏本身：

$(document).ready(function() {
  $(".hide").click(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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

我还创建了一个展示这个here的JSFiddle。

希望这有帮助！：）

显示和隐藏div有问题

1 个答案: