Question

在我的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`

Answer 1

这是一个jQuery-UI错误，JSP很好，我认为问题是jquery-ui和几乎所有其他javascript框架（例如你正在使用的bootstrap），必须将其元素初始化为在与他们合作之前我想要的类型。

例如在切换它们之前，必须说它们是标签。

示例代码

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

希望这有帮助

在JSP中单击按钮时显示下一个选项卡

1 个答案: