javascript - Css 如何在单击按钮后替换 block

Question

我的要求是..我有一个盒子。在框里面我有一个表单..我想要的是..当我点击提交按钮时，在框 表格将消失并显示一条消息。 像这样:

I have the jefiddle :

jsfiddle

这里，当我点击提交按钮时，消息出现在顶部并且 box1 正在下降..

Answer 1

我更喜欢使用 jQuery 来执行此操作，但这里是仅使用 javascript 并保持最小更改的更新 fiddle 。

<div id="box">
  <div class="box2">
      <h1 id="welcomeDiv"  style="display:none;" class="answer_list" >welcome</h1>
      <h1 id="details">Details</h1>
      <form id="foo-form" method="POST" onsubmit="return showDiv();">
          <input type="text" name="user" placeholder="Your name"/>
          <input type="submit" name="create" class="enter submit" value="Enter"/>
      </form>
  </div>
</div>

...和脚本...

function showDiv() {
   document.getElementById('welcomeDiv').style.display = "block";
   document.getElementById('details').style.display = "none";
   document.getElementById('foo-form').style.display = "none";
   return false;
}

http://jsfiddle.net/0qyj62dv/7/

表单元素现在被隐藏，原始的详细信息被隐藏，欢迎文本现在位于框内，而不是框外。哦，我将函数调用移动到表单的 onsubmit，所以它现在返回 false，实际上并没有尝试在 jsfiddle 上提交表单。

高度