如何以表格形式顯示/隱藏模型？

Question

在我的項目頁面中，如果有任何項目可用於登錄用戶，則將顯示加載模型彈出窗口，可以顯示其他方式不顯示該模型，我有兩個錨定標記

1. 我的專案

2. 添加新項目

3. 我的項目菜單單擊將顯示一個form1？

4. 添加新項目菜單單擊將顯示第二個form2嗎？

這是我的模型代碼：

<div class="modal-body">
  <h2 class="text-uppercase text-center m-b-30">
    <a href="index.html" class="text-success">
      <span>All Projects</span>
    </a>
  </h2>

  &nbsp;&nbsp;
  <a href="#" id="mp"> <i class="mdi mdi-account md-18"></i> My Projects</a>
  &nbsp;&nbsp;
  <a href="#" id="anp"> <i class="mdi mdi-plus md-18"></i> Add New Project </a>
  <form class="form-horizontal" action="#" id="myprojects">
    <div class="form-group m-b-25">
      <div class="col-xs-12">
        <label for="username">Name</label>
        <input class="form-control" type="email" id="username" required="" placeholder="Michael Zenaty">
      </div>
    </div>

    <div class="form-group m-b-25">
      <div class="col-xs-12">
        <label for="emailaddress">Email address</label>
        <input class="form-control" type="email" id="emailaddress" required="" placeholder="john@deo.com">
      </div>
    </div>

    <div class="form-group m-b-25">
      <div class="col-xs-12">
        <label for="password">Password</label>
        <input class="form-control" type="password" required="" id="password" placeholder="Enter your password">
      </div>
    </div>

    <div class="form-group m-b-20">
      <div class="col-xs-12">
        <div class="checkbox checkbox-custom">
          <input id="checkbox11" type="checkbox" checked>
          <label for="checkbox11">
                                                                I accept <a href="#">Terms and Conditions</a>
                                                            </label>
        </div>
      </div>
    </div>

    <div class="form-group account-btn text-center m-t-10">
      <div class="col-xs-12">
        <button class="btn w-lg btn-rounded btn-lg btn-primary waves-effect waves-light" type="submit">Sign Up Free</button>
      </div>
    </div>

  </form>

  <form class="form-horizontal" action="#" id="addnewprojects">
    <div class="form-group m-b-25">
      <div class="col-xs-12">
        <label for="username">Name</label>
        <input class="form-control" type="email" id="username" required="" placeholder="Michael Zenaty">
      </div>
    </div>

    <div class="form-group m-b-25">
      <div class="col-xs-12">
        <label for="emailaddress">Email address</label>
        <input class="form-control" type="email" id="emailaddress" required="" placeholder="john@deo.com">
      </div>
    </div>

    <div class="form-group m-b-25">
      <div class="col-xs-12">
        <label for="password">Password</label>
        <input class="form-control" type="password" required="" id="password" placeholder="Enter your password">
      </div>
    </div>

    <div class="form-group m-b-20">
      <div class="col-xs-12">
        <div class="checkbox checkbox-custom">
          <input id="checkbox11" type="checkbox" checked>
          <label for="checkbox11">
                                                                I accept <a href="#">Terms and Conditions</a>
                                                            </label>
        </div>
      </div>
    </div>

    <div class="form-group account-btn text-center m-t-10">
      <div class="col-xs-12">
        <button class="btn w-lg btn-rounded btn-lg btn-primary waves-effect waves-light" type="submit">Sign Up Free</button>
      </div>
    </div>

  </form>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>

我的jQuery代碼：

<script type="text/javascript">
$(document).ready(function() {
    $("#myprojects").hide();
    $("#mp").click(function(e) {
        $("#myprojects").show();
        $("#mp").hide();

    });
});


$(document).ready(function() {
    $("#addnewprojects").hide();
    $("#anp").click(function(e) {
        $("#addnewprojects").show();
        $("#anp").hide();

    });
});  

</script>

我的意圖是我將單擊哪個菜單，該表單將顯示在模型中

Answer 1

現在需要添加兩次$(document).ready並添加一些隱藏和顯示的代碼段。 運行示例片段。

 $("#myprojects").hide(); $("#mp").click(function(e) { $("#myprojects").show(); $("#addnewprojects").hide(); // $(this).hide(); $("#anp").show(); }); $("#anp").click(function(e) { $("#addnewprojects").show(); $("#myprojects").hide(); //$(this).hide(); $("#mp").show(); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="modal-body"> <h2 class="text-uppercase text-center mb-30"> <a href="index.html" class="text-success"> <span>All Projects</span> </a> </h2> &nbsp;&nbsp; <a href="#" id="mp"> <i class="mdi mdi-account md-18"></i> My Projects</a> &nbsp;&nbsp; <a href="#" id="anp"> <i class="mdi mdi-plus md-18"></i> Add New Project </a> <form class="form-horizontal" action="#" id="myprojects"> <div class="form-group mb-25"> <div class="col-xs-12"> <label for="username">Name</label> <input class="form-control" type="email" id="username" required="" placeholder="Michael Zenaty"> </div> </div> <div class="form-group mb-25"> <div class="col-xs-12"> <label for="emailaddress">Email address</label> <input class="form-control" type="email" id="emailaddress" required="" placeholder="john@deo.com"> </div> </div> <div class="form-group mb-25"> <div class="col-xs-12"> <label for="password">Password</label> <input class="form-control" type="password" required="" id="password" placeholder="Enter your password"> </div> </div> <div class="form-group mb-20"> <div class="col-xs-12"> <div class="checkbox checkbox-custom"> <input id="checkbox11" type="checkbox" checked> <label for="checkbox11"> I accept <a href="#">Terms and Conditions</a> </label> </div> </div> </div> <div class="form-group account-btn text-center mt-10"> <div class="col-xs-12"> <button class="btn w-lg btn-rounded btn-lg btn-primary waves-effect waves-light" type="submit">Sign Up Free1</button> </div> </div> </form> <form class="form-horizontal" action="#" id="addnewprojects"> <div class="form-group mb-25"> <div class="col-xs-12"> <label for="username">Name1</label> <input class="form-control" type="email" id="username" required="" placeholder="Michael Zenaty"> </div> </div> <div class="form-group mb-25"> <div class="col-xs-12"> <label for="emailaddress">Email address1</label> <input class="form-control" type="email" id="emailaddress" required="" placeholder="john@deo.com"> </div> </div> <div class="form-group mb-25"> <div class="col-xs-12"> <label for="password">Password</label> <input class="form-control" type="password" required="" id="password" placeholder="Enter your password"> </div> </div> <div class="form-group mb-20"> <div class="col-xs-12"> <div class="checkbox checkbox-custom"> <input id="checkbox11" type="checkbox" checked> <label for="checkbox11"> I accept <a href="#">Terms and Conditions1</a> </label> </div> </div> </div> <div class="form-group account-btn text-center mt-10"> <div class="col-xs-12"> <button class="btn w-lg btn-rounded btn-lg btn-primary waves-effect waves-light" type="submit">Sign Up Free [Add New Project]</button> </div> </div> </form> </div> </div> <!-- /.modal-content --> </div> <!-- /.modal-dialog --> </div>