0

私の jSP ページには、いくつかのタブがあります。タブにはボタンがあります。私が欲しいのは、ボタンをクリックすると、次のタブまたはインデックスを提供しているタブが表示されるはずです。

私index.jspは、

<div class="navbar btn-navbar">
            <div id="tabs" class="tabbable">
                <ul id="myTab" class="nav nav-tabs">
                    <li id="datacollect" class="active"><a href="#datacollector"
                        target="main" data-toggle="tab">Data Collector</a></li>
                    <li id="fromDB" class="selectDataloadType"><a
                        href="#fromDatabase" target="main" data-toggle="tab">Data Load
                            Database</a></li>
                    <li id="fromFile" class="selectDataloadType"><a
                        href="#fromFiles" target="main" data-toggle="tab">Data Load
                            File</a></li>
                    <li id="email" class="selectDataloadType"><a href="#fromEmail"
                        target="main" data-toggle="tab">Data Load Email</a></li>
                    <li id="webServices" class="selectDataloadType"><a
                        href="#fromWebServices" target="main" data-toggle="tab">Data
                            Load Web</a></li>
                    <li><a href="#datamap" target="main" data-toggle="tab">Data
                            Map</a></li>
                    <li><a href="#schedule" target="main" data-toggle="tab">Schedule</a></li>
                </ul>
                <br> <br> <br> <br> <br>
                <div id="myTabContent" class="tab-content">
                    <div class="tab-pane fade in active" id="datacollector">
                        <div class="container">
                            <div class="row">
                                <div class="span8">
                                    <form>
                                        <fieldset>
                                            <label class="control-label" for="dataloadType">Data
                                                load Type:</label> <select id="dataloadType" name="dataloadType">
                                                <option>Choose Data load Type</option>
                                                <option value="fromDB">From Database</option>
                                                <option value="fromFile">From File</option>
                                                <option value="email">E-mail</option>
                                                <option value="webServices">Web Services</option>
                                            </select>
                                            <p>
                                                <button id="dataloadNext" class="btn btn-success"
                                                    type="button">Submit</button>
                                            </p>
                                        </fieldset>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>

そしてスクリプトは

<script>
    $(function() {

        $("#dataloadNext").click(function() {
            $( "#tabs" ).tabs("active", 2 );
        });
    });
</script>

私は使用しjquery-1.9.0ています ここでのエラーは何ですか?

更新 1

このようなエラーを表示するブラウザ

Uncaught Error: cannot call methods on tabs prior to initialization; attempted to call `method 'active'                       jquery-1.9.0.js:490`
4

1 に答える 1

1

これはjQuery-UIエラーであり、JSPは問題ありません。問題は、jquery-uiと他のほとんどすべてのjavascriptフレームワーク(たとえば、使用しているブートストラップ)の要素をタイプIのように初期化する必要があることです。彼らと仕事をする前に欲しい。

たとえば、それらを切り替える前に、それらがタブであることを示す必要があります。

サンプルコードは

<script>
  $(function() {
    $( "#tabs" ).tabs();
  });
  //then use them
  $("#dataloadNext").click(function() {
        $( "#tabs" ).tabs("active", 2 );
    });
 </script>

お役に立てれば

于 2013-04-03T10:09:50.050 に答える