JavaScript onClick隐藏和显示

Question

需要解决方案

首先只显示formOne ，当选择按钮或菜单时，隐藏formOne并显示formTwo 。 如果用户再次选择，则显示formOne并隐藏formTwo 。

错误

我想在同一页面上显示两个表单。 显示两种形式，如formOne和formTwo 。

现在它显示表单并仅隐藏formOne。

视图

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jQuery/1.12.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $(".formOne").toggle();
        $(".formTwo").show();
    });
});
</script>
</head>
<body>

<button>Muktinath</button>

<form class="formOne"><input type="text" placeholder="Muktinath"/> </form>

<button>Manakamana</button>

<form class="formTwo"><input type="hidden" placeholder="Manakamana"/> </form>

</body>
</html>

Answer 1

UPDATE

使用,show()和.hide()方法是另一种可能性。 所有详细信息都在代码段中

SNIPPET 2

 #formTwo { display: none; }

 <!doctype html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(e){ /* Get the clicked button's form value */// ex. 'formOne' var formID = this.getAttribute('form'); /* Concat the srting formID with a '#' then wrap it up as a jQObject */// ex. $('#formOne') var target = $('#'+formID); var other = $('form').not(target); /* seen and unseen states will be determined on 'this' */ var seen = target.is(":visible"); var unseen = target.is(":hidden"); /* Ternary conditional to determine status of 'this', then invoke the opposite status. */ var status = (seen) ? reveal() : obscure(); function reveal() { target.hide(); other.show(); } function obscure() { other.hide(); target.show(); } }); }); </script> </head> <body> <!--Added form attribute to each button--> <button form="formOne">Muktinath</button><button form="formTwo">Manakamana</button> <!--Changed each form class to id--> <form id="formOne"><input type="text" placeholder="Muktinath"/> </form> <form id="formTwo"><input type="text" placeholder="Manakamana"/> </form> </body> </html>

二手toggleClass()并取得两个类.hide和.show

 .hide { display: none; } .show { display: block; }

 <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(e){ $(".formOne").toggleClass('show hide'); $(".formTwo").toggleClass('show hide'); }); }); </script> </head> <body> <button>Muktinath</button><button>Manakamana</button> <form class="formOne hide"><input type="text" placeholder="Muktinath"/> </form> <form class="formTwo show"><input type="text" placeholder="Manakamana"/> </form> </body> </html>

Answer 2

更新以下评论的评论

要在表单内添加按钮，请使用<input type="button" />按钮，按下按钮不会提交表单，并将按钮放在表单内部，以便它们一起切换。

jQuery的

$（文件）。就绪（函数（）{

$(".formTwo").toggle();
    $("input[type=button]").click(function(){
        $(".formOne").toggle();
        $(".formTwo").toggle();
    });
});

HTML

  <form class="formOne">
    <input type="button" value="Muktinath" />
    <input type="text" placeholder="Muktinath" />
  </form>

  <form class="formTwo">
    <input type="button" value="Manakamana" />
    <input type="text" placeholder="Manakamana" />
  </form>

老答案

删除$(".formTwo").show(); 因为它会一直显示.formTwo按钮点击。

你想切换它们，使用$(".formOne, .formTwo").toggle(); 相反，也因为你不希望.formTwo在页面加载时显示在文档就绪之后和按钮点击之前添加一个toggle() ，如下所示：

$(document).ready(function(){
$(".formTwo").toggle();
    $("button").click(function(){
        $(".formOne, .formTwo").toggle();
    });
});

参见示例： https ： //jsfiddle.net/mp6oquxz/4/

JavaScript onClick隐藏和显示

问题描述

2 个解决方案

解决方案1
0 已采纳 2016-06-10 16:51:53

UPDATE

SNIPPET 2

解决方案2
0 2016-06-10 16:52:35

JavaScript onClick隐藏和显示

问题描述

2 个解决方案

解决方案1 0 已采纳 2016-06-10 16:51:53

UPDATE

SNIPPET 2

解决方案2 0 2016-06-10 16:52:35

解决方案1
0 已采纳 2016-06-10 16:51:53

解决方案2
0 2016-06-10 16:52:35