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

这是一个工作小提琴。 @Odelibalta在修复方面是正确的，但是阻止它尝试POST的基本代码段如下。

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

jQuery UI选项卡切换无法正常工作

2 个答案: