CSS如何在單擊按鈕后替換塊

Question

我的要求是..我有一個盒子 。 里面的盒子里有一個表格 。.我想要的是..當我點擊提交按鈕時 ， 盒子里面的表格將消失，並顯示一條消息。 像這樣：

I have the jefiddle :

jsfiddle

在這里，當我單擊提交按鈕時，消息顯示在頂部，而box1下降。

Answer 1

我更喜歡使用jQuery來做到這一點，但這是僅使用javascript並保持最小更改的更新小提琴。

<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上提交表單。

高度

Answer 2

創建一個樣式與#box相同的類。

比方說answer_box

.answer_box {
    margin: 0px auto;
    position: relative;
    background: pink;
    height: 300px;
    width: 400px;
    display: block;
    border: dotted;
    border-width: 1px;
}

將answer_box類添加到歡迎容器。

<div id="welcomeDiv"  style="display:none;" class="answer_box" ><h1> WELCOME<h1></div>

要從頂部對齊，請在Welcome div中給<h1>留一點margin 。

單擊提交時，您需要隱藏盒子容器。

function showDiv() {
    document.getElementById('box').style.display = "none";
    document.getElementById('welcomeDiv').style.display = "block";
}

Answer 3

請嘗試這個

HTML ：（更改類型=提交至類型=按鈕 ）

<input type="button" name="create" class="enter submit" value="Enter"  onclick="showDiv()" > 

CSS ：（更改類型=提交至類型=按鈕 ）

.box2 input[type=button] {
  width: 100%;
  display: block;
  margin-bottom: 10px;
  position: relative;
}

.answer_list{
    margin: 0px auto;
  position: relative;
    background:pink;
   height:300px;
    width:400px;
  display: block;
  border: dotted;
  border-width: 1px;
    text-align:center;
}

演示

Answer 4

看這個例子， http://jsfiddle.net/0qyj62dv/8/

您需要做的就是這個

1. 使用ajax提交表單。
2. 在同一父div內添加“歡迎”選項卡和“表單”選項卡

3. 根據需要使用style.display屬性切換選項卡

    <button type="button" name="create" class="enter submit" onclick="submitForm()">Enter</button> function submitForm(){ document.getElementById('tab2').style.display = "block"; document.getElementById('tab1').style.display = "none"; $.ajax({ method: 'POST', url : '', data : $('#myForm').serialize(), success : function(data){ console.log('success',data); alert('success'); } }); } 

你可以使用jQuery來稱呼它