Question

示例位于：http://jqueryui.com/demos/tabs/，我希望在单击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();
});

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

3 个答案: