javascript - 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

http://jsfiddle.net/x01nkasj/1

这是一个可以工作的 fiddle 。 @Odelibalta 的修复是正确的，但阻止它尝试 POST 的基本代码片段如下。

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