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 回答