Question

我想做以下事情：

1. tab-1 is selected when page load at first time
2. After clicking tab-2, form is submitted and page need to stay on the tab-2

我测试了两个代码段。但是，它们都有错误（见下文）：

<form id="target">
    <ul>
        <li><a href="#tabs-1" id="tabs-A">Tab-1</a></li>
        <li><a href="#tabs-2" id="tabs-B">Tab-2</a></li>
        <li><a href="#tabs-3" id="tabs-C">Tab-3</a></li>
    </ul>
    <div id="tabs-1">
    </div>
    <div id="tabs-2">   
    </div>
    <div id="tabs-3">   
    </div>
</form>

代码1- 它适用于point2，不适用于第1点

<script>
                $(function() {

                   var $tabs = $('#tabs').tabs();

                   $tabs.tabs( "option", "selected", 1 );

                   $('#tabs-B').click(function() {
                        $('#target').submit();

                    });
                });
            </script>

代码2- 它适用于point1，但单击tab-2

后表单不会提交

var $tabs = $('#tabs').tabs();


                   $('#tabs-B').click(function() {
                        $('#target').submit(function() {
                            $tabs.tabs( "option", "selected", 1 );
                        });

                    });

Answer 1

使用[select][1]方法

$( "#tabs" ).tabs({
   select: function(event, ui) {

  var data = $("#from1").serialize();

   console.log(data);
   // submit the for via ajax here
       /*$.post("/path",{data:data},function(){      
          //clear the form fields or what ever you want to do
       });*/ 


   }
});

http://jsfiddle.net/5RMxZ/16/

单击选定的选项卡后提交表单，页面也会保留在该选项卡上

1 个答案: