Javascript 用一个按钮交换div内容

我在每个分区中有两种类型的内容。一种是表格，另一种是表格。我想按一个按钮来交换它

HTML

<a id="btn" class="btn btn-primary pull-right"><i class="fa fa-envelope"> Contact Us</i></a>
<br style="clear:both" />
<div class="well well-sm">
  <div id="table">
    <table class="table table-bordered">
      <tr>
        <th>ID</th>
        <th>Title</th>
        <th>Price</th>
      </tr>
      <tr>
        <td>001</td>
        <td>DL650XT</td>
        <td>369000</td>
      </tr>
    </table>
  </div>
  <div id="formDiv">
    <form class="form" method="post" action="" name="contact" id="contact">
      <fieldset>
        <legend> Contact Form </legend>

        <div class="form-group has-feedback">
          <div class="input-group">
            <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
            <input type="text" class="form-control" id="name" name="name" placeholder="Name *" />
            <span class="form-control-feedback glyphicon"></span>
          </div>
        </div>

        <div class="form-group has-feedback">
          <div class="input-group">
            <span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
            <input type="text" class="form-control" id="email" name="email" placeholder="E-Mail *" />
            <span class="form-control-feedback glyphicon"></span>
          </div>
        </div>

        <div class="form-group has-feedback">
          <div class="input-group">
            <span class="input-group-addon"><i class="glyphicon glyphicon-earphone"></i></span>
            <input type="text" class="form-control" id="telefon" name="telefon" placeholder="Telefon" />
            <span class="form-control-feedback glyphicon"></span>
          </div>
        </div>

        <div class="form-group has-feedback">
          <div class="input-group">
            <span class="input-group-addon"><i class="glyphicon glyphicon-pencil"></i></span>
            <textarea type="text" id="message" class="form-control" name="message" rows="10" cols="40" placeholder="Nachricht*"></textarea>
            <span class="form-control-feedback glyphicon"></span>
          </div>
        </div>

        <div class="form-group">
          <button type="submit" id="submit" class="btn btn-primary btn-lg">Submit</button>
          <button type="reset" id="cancel" class="btn btn-danger btn-lg">Reset 1</button>
        </div>

      </fieldset>
    </form>
  </div>
</div>

它只工作一次。我希望每次点击都能交换内容

---

这里是小提琴：

您可以使用jQuery

toggle（）

函数。。。自动在显示/隐藏状态之间切换：）

您可以使用

切换

功能来显示或隐藏匹配的元素

$('#btn').on('click',function() {
    $('#table').toggle();
    $('#formDiv').prop('display', 'show');
})

$（文档）.ready（函数（）{
$（'#btn'）。在（'click'，function（）上{
$（“#表”）.toggle（）；
$（'#formDiv'）。toggle（）；
});
});
#formDiv{
显示：无；
边框：红色；
}

联系我们


身份证件
标题
价格
001
DL650XT
369000
联系方式
提交
重置1
切换效果很好，但您也可以手动处理。例如，如果您希望在联系人窗体显示时能够执行某些功能，而不是在表格显示时。下面的代码执行与切换相同的操作，仅手动应用。只是为了多样化。：）


$（文档）.ready（函数（）{
var formEl=$（“#formDiv”），
tableEl=$（“#table”），
btnEl=$（“#btn”）；
//交换内容
btnEl.on（'click'，function（）{
如果（表格是（“：可见”））{
tabele.hide（）；
formEl.show（）；
btnEl.find（“i”）.text（“返回表”）；
}否则{
tablel.show（）；
formEl.hide（）；
btnEl.find（“i”）.文本（“联系我们”）；
}
})
});
#formDiv{
显示：无；
}

联系我们


身份证件
标题
价格
001
DL650XT
369000
联系方式
提交
重置1

$('#btn').on('click',function() {
    $('#table').toggle();
    $('#formDiv').prop('display', 'show');
})