在Jquery中单击选项卡菜单上的项目后提交表单

Question

示例位于：http://jqueryui.com/demos/tabs/，我希望在单击-2\f25 tab-2菜单时提交表格。

以下是我的代码。但是，表单在单击后不会提交。

有谁可以帮我？非常感谢！

<script>
    $(function() {
        $( "#tabs" ).tabs();

        $('#tabs-2').click(function() {
            $('#target').submit();
        });
    });
</script>
<div id="tabs">
    <form id="target">
        <ul>
            <li><a href="#tabs-1">Tab-1</a></li>
            <li><a href="#tabs-2">Tab-2</a></li>
            <li><a href="#tabs-3">Tab-3</a></li>
        </ul>
        <div id="tabs-1">
        </div>
        <div id="tabs-2">
        </div>
        <div id="tabs-3">
        </div>
    </form>

Answer 1

$(document).ready(function(){
    $('#tabs-2').click(function() {
        $('#target').submit();
    });
});

Answer 2

你可能会发现标签插件阻止了默认的点击操作，并且没有调用你的点击事件。

您应该尝试挂钩到tabselect事件，并使用ui.tab检查所选选项卡的href属性是否为#tabs-2。

$("#tabs").bind("tabsselect", function(event, ui) {
    if(ui.tab.attr('href') == '#tabs-2') {
        $('#target').submit();
    }
});

或您可以在创建选项卡时执行此操作：

$("#tabs").tabs({
   select: function(event, ui) {
        if(ui.tab.attr('href') == '#tabs-2') {
            $('#target').submit();
        }
     }
});

您还可以使用ui.index获取所选选项卡的基数为零的索引，或使用ui.panel获取该选项卡的所选内容div。你喜欢哪一个都行！

Answer 3

我认为您需要定义这里提到的Tab-2的id。但是这里你指的是div id click。

<li><a href="#tabs-2" id="tab2">Tab-2</a></li>

$('#tabs2').click(function() {
    $('#target').submit();
});