HTML表单和javascript——在同一个表中显示不同的表单

我在HTML表格中有4个表单，使用4按钮调用表单

HTML:

表格1
表格2
表格3
表格4
1:
2:
三：
对
.
2.
>
对
.
3.
>
3.
.
4.
对

我想在（td id=“col”）中显示不同的表单，但它有一个错误，它将同时显示两个表单。我想如果我单击一个按钮，一个表单将打开，另一个表单将关闭。例如，如果表单1打开，则表单2、3、4将关闭

这是javascript代码：

<script type="text/javascript">
$(document).ready(function () {
    $('#cpass').click(function () {
        $('#form1').collapse('show');
        if ($('#form2').is(':visible'))
            $('#form2').collapse('hide');
    });
    $('#cinfo').click(function () {
        $('#form2').collapse('show');
        if ($('#form1').is(':visible'))
            $('#form1').collapse('hide');
    });
    $('#cmail').click(function () {
        $('#form3').collapse('show');
        if ($('#form4').is(':visible'))
            $('#form4').collapse('hide');
    });
    $('#cplace').click(function () {
        $('#form4').collapse('show');
        if ($('#form3').is(':visible'))
            $('#form3').collapse('hide');
    });
});

$（文档）.ready（函数（）{
$（'#cpass'）。单击（函数（）{
$（'form1'）。折叠（'show'）；
如果（$（'#form2'）。是（':visible'））
$（'#form2'）。折叠（'hide'）；
});
$（'#cinfo'）。单击（函数（）{
$（'#form2'）。折叠（'show'）；
如果（$（'#form1'）。是（':visible'））
$（'#form1'）。折叠（'hide'）；
});
$（'#cmail'）。单击（函数（）{
$（'#form3'）。折叠（'show'）；
如果（$（'#form4'）。是（':visible'））
$（'#form4'）。折叠（'hide'）；
});
$（'#cplace'）。单击（函数（）{
$（'#form4'）。折叠（'show'）；
如果（$（'#form3'）。是（':visible'））
$（'#form3'）。折叠（'hide'）；
});
});

---

如何解决此问题？

第1行和第24到26行不需要（它们正在生成错误）

---

使用slideUp和slideDown更新jQuery代码。它一次只打开一个窗体。还为所有表单添加一个通用的有意义的类名，这样您就可以调用hide/sildeUp，而无需显式使用多个id/class

$(document).ready(function () {
    $('#cpass').click(function () {
        $('#form1').slideDown();
        $('#form2,#form3,#form4').slideUp();
    });
    $('#cinfo').click(function () {
        $('#form2').slideDown();
        $('#form1,#form3,#form4').slideUp();
    });
    $('#cmail').click(function () {
        $('#form3').slideDown();
        $('#form1,#form2,#form4').slideUp();
    });
    $('#cplace').click(function () {
        $('#form4').slideDown();
        $('#form1,#form2,#form3').slideUp();
    });
});

编辑：删除内联onclick和css以保持html的干净

---

虽然有一些方法可以简化JS代码，但我将保留通用格式，并稍微修改一下以获得效果。请注意，可以使用逗号选择多个div对象

您可以通过添加像rkamath建议的那样的动画来使代码更清晰。他的作品具有幻灯片效果。为了方便您，这里还有一个淡入淡出效果：

$(document).ready(function () {
$('#cpass').click(function () {
    $('#form2,#form3,#form4').hide();
    $('#form1').fadeIn();

});
$('#cinfo').click(function () {
    $('#form1,#form3,#form4').hide();
    $('#form2').fadeIn(); 

});
$('#cmail').click(function () {
    $('#form4,#form2,#form1').hide();
    $('#form3').fadeIn();

});
$('#cplace').click(function () {
    $('#form3,#form2,#form1').hide();
    $('#form4').fadeIn();

});
});

这是我的建议

如果您真的想保留代码的一般结构，请执行以下操作：

$('#cpass').click(function () {
    $('#form1').collapse('show');
    if ($('#form2,#form3,#form4').is(':visible'))   $('#form2,#form3,#form4').collapse('hide');
});

$('#cinfo').click(function () {
    $('#form2').collapse('show');
    if ($('#form1,#form3,#form4').is(':visible'))  
    $('#form1,#form3,#form4').collapse('hide');
});

$('#cmail').click(function () {
    $('#form3').collapse('show');
    if ($('#form4,#form2,#form1').is(':visible')) 
    $('#form4,#form2,#form1').collapse('hide');
});

$('#cplace').click(function () {
    $('#form4').collapse('show');
    if ($('#form3,#form2,#form1').is(':visible'))  
    $('#form3,#form2,#form1').collapse('hide');
});

---

这是一个.

不要将

放在JSFIDLE的Javascript面板中，它会自动为您执行此操作。当我修复此问题时，它会起作用：顺便问一下：为什么要同时使用内联

onclick

属性和Javascript

。单击（）

函数？为什么需要检查？把它们都关上。如果它已经关闭了，什么也不会发生。他的小提琴里的那些台词没有问题。错误是由于

行引起的。他发布了一个新的小提琴链接，但没有。是的，我知道。我点击了23而不是24。这是一种更干净的方式。当我在我的网站中使用hide（）时，表单无法显示，只需显示一个空值，它在小提琴上运行良好。如果它不适合你，那么就使用我发布的第二个选项。根据您在初始问题中给出的代码，第二个选项应该适用于您。如果我使用第二个选项只能工作一次。请使用更新的代码重试第二个选项。第二次是指在您第一次提交表单后它不起作用吗？如果我单击另一个表单，它将在表中显示所有表单

$(document).ready(function () {
$('#cpass').click(function () {
    $('#form2,#form3,#form4').hide();
    $('#form1').fadeIn();

});
$('#cinfo').click(function () {
    $('#form1,#form3,#form4').hide();
    $('#form2').fadeIn(); 

});
$('#cmail').click(function () {
    $('#form4,#form2,#form1').hide();
    $('#form3').fadeIn();

});
$('#cplace').click(function () {
    $('#form3,#form2,#form1').hide();
    $('#form4').fadeIn();

});
});

$('#cpass').click(function () {
    $('#form1').collapse('show');
    if ($('#form2,#form3,#form4').is(':visible'))   $('#form2,#form3,#form4').collapse('hide');
});

$('#cinfo').click(function () {
    $('#form2').collapse('show');
    if ($('#form1,#form3,#form4').is(':visible'))  
    $('#form1,#form3,#form4').collapse('hide');
});

$('#cmail').click(function () {
    $('#form3').collapse('show');
    if ($('#form4,#form2,#form1').is(':visible')) 
    $('#form4,#form2,#form1').collapse('hide');
});

$('#cplace').click(function () {
    $('#form4').collapse('show');
    if ($('#form3,#form2,#form1').is(':visible'))  
    $('#form3,#form2,#form1').collapse('hide');
});