jQuery UI 选项卡切换不起作用

Question

我有以下一段代码。每当用户单击按钮时，我都需要切换选项卡。我看到选项卡切换了一会儿，但它立即切换回第一个选项卡。这是为什么？我该如何解决这个问题？

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

        <div id="tabs-1">
            <div class="input">
            <form>
                <fieldset>
                    <legend>Data source</legend>
                    Blah blah
                </fieldset>

                <fieldset>
                    <legend>Legend</legend>  
                    <div id="accordion">
                        <h4>Check sequence</h4>
                        <div>                              
                            <button id="submitCheckSequence">Test!</button>    
                        </div>
                        <h4>Random section</h4>
                        <div>                               
                        </div>
                    </div>
                </fieldset>    
            </form>
        </div>

        </div>
        <div id="tabs-2">
            <p>Blah</p>
        </div>
        <div id="tabs-3">
            <p>Blah</p>
        </div>    
        <div id="tabs-4">
            <textarea rows="4" cols="50" readonly>
                Blah
            </textarea>
        </div>    
    </div>

    <script type="text/javascript">
        $(document).ready(function () {
            $("#tabs").tabs();
            $("#accordion").accordion();

            $("#submitCheckSequence").click(function () {
                $("#tabs").tabs("option", "active", 3);
            });
        });

    </script>

Answer 1

<div class="input"> 没有结束标签。此外，您的 button 在表格内。这可能就是为什么在您单击该表单中的按钮后它会刷新的原因。为您的表单提供 name 属性并对其执行 e.preventDefault。如果您对该表格没有任何其他输入，我会取出表格并将按钮单独留在那里。这种方式适用于jsfiddle。

Answer 2

http://jsfiddle.net/x01nkasj/1

这是一个有效的 fiddle。 @Odelibalta 的修复是正确的，但是防止它尝试 POST 的基本片段如下。

        $("#submitCheckSequence").click(function (event) {
            event.preventDefault();
            $('#tabs').tabs("option", "active", 2);
        })

jQuery UI 选项卡切换不起作用

jQuery UI tab switching not working

javascript

jquery

jquery-ui-tabs