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

更新

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

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 个答案:

更新

SNIPPET 2