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

时间:2012-06-21 19:00:56

标签: javascript jquery jquery-ui jquery-ui-tabs

我正在通过按钮点击功能控制标签。我希望用户按顺序浏览标签。每个选项卡都有不同的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>

1 个答案:

答案 0 :(得分:1)

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

此外,摆脱按钮周围的<a>标签。

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