0

私はボタンクリック機能を介してタブを制御するかなりの戦いをしています。ユーザーに順番にタブを見てもらいたい。各タブには異なる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>
4

1 に答える 1

1

ボタンのタイプが「submit」で、ページを強制的に更新するためかもしれません。それらをに変更してみてください<input type="button" ... />

<a>また、ボタンの周りのタグを取り除きます。

ボタン<input type='button'>またはリンクのいずれかを使用<a href='...'>text</a>します。リンクでボタンをラップしても意味がありません。

于 2012-06-21T19:04:32.337 に答える