Javascript 2个（或更多）表单，以带制表符的模式显示

我有一个带有一些选项卡的模态，每个选项卡都有自己的形式。我正在寻找一些方法来更改页脚，以便提交工作的基础上，积极的标签

启动演示模式
&时代；
情态标题






FormOne
表格二
接近
保存更改

应该怎么做呢？是否为每个选项卡添加一个页脚，并在选项卡处于活动状态时显示？还有别的办法吗

更新：

---

除了单击每个按钮时的触发器url之外，一切都正常。

我更新了JFiddle。看看这个：

您可以使用检索到的id来决定保存哪个选项卡，而不必提醒id。您只需向所有选项卡（在li标记上）添加id和唯一类（此处为mytabs）

编辑：实际上，您并不真正需要可以选择父类的类（“my tab ul li.active”）。有几种可能性

编辑2:进一步解释

给出表单id，如tab id表单（tab id=属于表单的选项卡的id）

将警报行替换为

$（“#”+$（“.mytabs.active”）[0].id+“-form”）.submit（）

完整解决方案（在IE和FF中测试）：

使用jquery：

    $("#tab1").click(function(){
    $("#submit1").css("display","inline-block !important");
    $("#submit2").css("display","none");
});

$("#tab2").click(function(){
    $("#submit2").css("display","inline-block !important");
    $("#submit1").css("display","none");
});

---

Fiddle:

您在所有选项卡中都有相同的按钮吗？没有。我想在第一个选项卡上自由添加x按钮，在第二个选项卡上自由添加y按钮。在这种情况下，最好有多个页脚并相应地显示它。我如何才能做到这一点？你能分享一些例子吗？谢谢，我正在根据你的建议做这个。我完成后会更新的，不能用了。我已经更新了这个问题。再次感谢您的时间。真奇怪，您注意到我拆下了一个支架吗？对我来说，这似乎有效。您没有正确关闭表单，某些浏览器对此有问题。再试一次，我更新了它。这是故意的。关闭表单而不将“提交”按钮放在表单内，请勿提交表单。我尝试了你的更新，但没有提交。再次感谢，不客气。没有你那么礼貌我不得不经历。。。不管怎样，哪个浏览器？我用的是FF 36（旧的个人电脑自动取款机），现在用IE检查也不起作用。这些都是恼人的问题，没有看到错误，不管怎样，概念上应该不需要改变，我有时在生产环境中使用这样的东西。谢谢。现在的主要问题是如何为每个按钮关联表单提交链接，因为每个选项卡都有自己的提交链接。@Khrys您可以使用AJAX提交表单来完成it@Khrys你能使用Ajax吗？这次不行。谢谢你的建议。

$("#save-button").click(function() {
    alert($(".mytabs.active")[0].id);
});

// optional: change the text on the button when the tab is switched
$("#tab1").click(function() {
    $("#save-button").html("Submit 1");        
});

$("#tab2").click(function() {
    $("#save-button").html("Submit 2");        
});

 $("#save-button").click(function() {
    var id = $(".mytabs.active")[0].id;
    if (id == "tab1") {
        // you can also do the submits here, then there is no need for a 
        // special id, e.g. $("#completely-unrelated-form-id").submit()
    } else {
        // other submit if done in here, however with this approach you
        // always have to modify the code when adding tabs.
    }
    $("#" + id + "-form").submit(); // == EDIT2, no more code manipulation needed
});

    $("#tab1").click(function(){
    $("#submit1").css("display","inline-block !important");
    $("#submit2").css("display","none");
});

$("#tab2").click(function(){
    $("#submit2").css("display","inline-block !important");
    $("#submit1").css("display","none");
});