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

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

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

<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- 它适用于第 2 点，不适用于第 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/