Javascript JQuery按钮每次单击，显示/隐藏表单

我想我只是从这里开始，所以不妨寻求任何帮助，因为我对这个新手问题很失望

我有一个按钮显示我创建的表单，只需单击一次，但当我想显示另一个带有另一个按钮的表单时，问题就出现了

我想要的，基本上是

buttonA

显示

formA

，但当我点击

buttonB

时，我想隐藏

formA

并显示

formB

。现在发生的是，它覆盖了

formA

和

formB

这是我目前的代码

function runEffect() {
  $( "#effect" ).show( "drop");
};

function runEffect2() {
  $( "#effect2" ).show( "drop");
};


//callback function to bring a hidden box back
function hideEffect() {
    $( "#effect:visible" ).hide( "drop");

};

// set effect from select menu value

$( "#button" ).each(function(index) {
  $(this).click(function(){
  runEffect();
    });
});

$( "#button2" ).each(function(index) {
  $(this).click(function(){
  runEffect2();
    });
});

$( "#effect" ).hide();
$( "#effect2" ).hide();

我知道这很容易，但我似乎找不到答案

谢谢

试试这个

function runEffect() {
  $( "#effect" ).show( "drop");
  $( "#effect2" ).hide( "drop");
};

function runEffect2() {
 $( "#effect2" ).show( "drop");
 $( "#effect" ).hide( "drop");
};

试试这个

function runEffect() {
  $( "#effect" ).show( "drop");
  $( "#effect2" ).hide( "drop");
};

function runEffect2() {
 $( "#effect2" ).show( "drop");
 $( "#effect" ).hide( "drop");
};

像这样的

---

类似这样的东西？

我还没有测试过它，但也许你想要一个更动态的函数。 Button类必须类似于“formButton”，id类似于“form1Button”，然后表单id应该是“form1”，依此类推

（表格2将有一个类为“formButton”的按钮，id类似于“form2Button”，表格2需要id“form2”

---

单击formButton时，将显示该表单。所有没有请求ID的其他表单都将被隐藏。

我还没有测试过它，但您可能希望使用更具动态性的功能。 Button类必须类似于“formButton”，id类似于“form1Button”，然后表单id应该是“form1”，依此类推

（表格2将有一个类为“formButton”的按钮，id类似于“form2Button”，表格2需要id“form2”

单击表单按钮时，将显示该表单。所有其他没有请求ID的表单都将隐藏

$(".formButton").click(function(e) {
    e.preventDefault(); //prevent default action

    var id = $(this).attr('id');
    var formId = id.replace('Button', '');

    $('#' + formId).show(); 
    $('form').not(document.getElementById(formId)).hide();

});