如何以表格形式显示/隐藏模型？

时间：2019-01-29 10:37:18

标签： javascript jquery html ajax

在我的项目页面中，如果有任何项目可用于登录用户，则将显示加载模型弹出窗口，可以显示为其他方式，否则在该模型中不会显示，我有两个锚标记

  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>

我的意图是我将单击该菜单的菜单会显示在模型中

1 个答案:

答案 0 :(得分：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 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 Free1</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">Name1</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 address1</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 Conditions1</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 [Add New Project]</button>
      </div>
    </div>

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

相关问题
最新问题