使用上一个/下一个按钮控制 jQuery 选项卡

Question

我正在通过按钮单击功能控制标签。我希望用户按顺序浏览标签。每个选项卡都有不同的 html 表单。所以按钮也提供了验证。但主要问题是下一个和上一个按钮根本不起作用。为什么按钮根本不改变标签？

jQuery

<script type="text/javascript">
    $(".nexttab").click(function() {
        var selected = $("#tabs").tabs("option", "selected");
        $("#tabs").tabs("option", "selected", selected + 1);
    });

    $(".backtab").click(function() {
        var selected = $("#tabs").tabs("option", "selected");
        $("#tabs").tabs("option", "selected", selected - 1);
    });
</script>

HTML

<div id="convertThis">
    <div id="tabs">
        <div href="#a" rel="a" title="./images/icons/category1.png">Category 1</div>
        <div href="#b" rel="b" title="./images/icons/category2.png">Category 2</div>
    </div>

    <div id="divs">
        <div id="a">
               <form action="" method="post">
                 CATEGORY 1 FORM CONTENT
                    <div class="tabController">
                        <div class="tabNext">
                        <input type="button" class="nexttab" value="Next &gt;&gt;" name="submit" id="submit" style="background: #EFEFEF; float:right;"/>
                        </div>
                    </div>
                </form>
        </div>
        <div id="b">
             <form action="" method="post" id="post2">
                    CATEGORY 2 FORM CONTENT
                 <div class="tabController">
                     <div class="tabBack">
                        <input type="button" class="backtab" value="&lt;&lt; Previous" name="submit2" id="submit2" style="background: #EFEFEF;"/>
                     </div>
                 <div class="tabNext">
                        <input type="button" class="nexttab" value="Next &gt;&gt;" name="submit" id="submit" style="background: #EFEFEF; float:right;"/>
                </div>
                </div>
           </form>
        </div>
    </div>
</div>

Answer 1

可能是因为您的按钮类型为“submit”，并且它们会强制刷新页面？尝试将它们更改为<input type="button" ... />

另外，去掉按钮周围的<a> 标签。

使用按钮 <input type='button'> 或链接 <a href='...'>text</a>，链接包裹按钮是没有意义的。