Question

我有一个带有一些标签的模态，每个标签都有自己的表格。我正在寻找一些方法来更改页脚，以便提交基于活动选项卡。

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <div class="tabbable">
            <ul class="nav nav-tabs" data-tabs="tabs">
                <li class="active">
                    <a href="#One" data-toggle="tab">One</a>
                </li>
                <li>
                    <a href="#Two" data-toggle="tab">Two</a>
                </li>
            </ul>
            <div class="tab-content">
                <div class="tab-pane active" id="One">
                    <form id="FormOne" role="form" class="container-fluid" action="One.asp" method="post">
                        <div class="row">
                            FormOne
                        </div>
                    </form>
                </div>
                <div class="tab-pane" id="Two">
                    <form id="FormTwo" role="form" class="container-fluid" action="Two.asp" method="post">
                        <div class="row">
                            FormTwo
                        </div>
                    </form>
                </div>
            </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

应该怎么做？为每个标签添加一个页脚并在标签处于活动状态时显示它？其他一些方式？

更新：

http://jsfiddle.net/r9b3ugs5/2/

当我点击每个按钮时，除了触发网址外，还可以使用。

Answer 1

我更新了JFiddle。看看这个：

http://jsfiddle.net/r9b3ugs5/1/

您可以使用检索到的ID来决定必须保存哪个选项卡，而不是警告ID。您需要做的就是在所有选项卡上添加一个id和一个唯一的类（mytabs）（在li标签上）。

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

编辑：实际上你并不需要你可以选择父级的课程（“＃my-tab-ul li.active”）。几种可能性。

EDIT2：进一步说明

提供表单ID，例如 tab-id -form（ tab-id =属于表单的标签的id）
用
替换警戒线
$("#" + $(".mytabs.active")[0].id + "-form").submit();

完整解决方案（在IE和FF中测试）：http://jsfiddle.net/r9b3ugs5/5/

// 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
});

Answer 2

使用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");
});

小提琴： Demo

2个（或更多）形式在带有制表符的模态中

2 个答案: