0

您好我已经创建了一个 JSP 页面。第一个选项卡包含一个 SELECT 字段。根据选择的值，我想显示下一个选项卡。任何人都可以帮助我吗？我尝试了很多次，但我没有得到。

<div class="navbar btn-navbar">
        <div id="tabs" class="tabbable">
            <ul id="myTab" class="nav nav-tabs">
                <li class="active"><a href="#datacollector" target="main"
                    data-toggle="tab">Data Collector</a></li>
                <li class="hidden"><a href="#fromDB" target="main"
                    data-toggle="tab">Data Load</a></li>
                <li class="hidden"><a href="#fromFile" target="main"
                    data-toggle="tab">Data Load</a></li>
                <li class="hidden"><a href="#email" target="main"
                    data-toggle="tab">Data Load</a></li>
                <li><a href="ajax/DataFieldMapping.jsp" 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>
            <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 name="selectType" action="selectType"
                                    onsubmit="return validateForm()" target="#fromDB" method="get">
                                    <fieldset>

                                        </select> <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="nexttab" type="submit" class="btn btn-success">Submit</button>
                                        </p>
                                    </fieldset>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-pane fade" id="fromDB">
                    <iframe src="GenericFileUpload.jsp" width="1250" height="400"></iframe>
                </div>
                <div class="tab-pane fade" id="fromFile">
                    <iframe src="GenericDB.jsp" width="1250" height="400"></iframe>
                </div>
                <div class="tab-pane fade" id="email">
                    <iframe src="EmailService.jsp" width="1250" height="400"></iframe>
                </div>
                <div class="tab-pane fade" id="datamap">
                    <iframe src="DataFieldMapping.jsp" width="1250" height="400"></iframe>
                </div>
                <div class="tab-pane fade" id="schedule">
                    <iframe src="UploadConfiguration.jsp" width="1250" height="400"></iframe>
                </div>
            </div>
        </div>
    </div>

如果用户从 File中选择，它应该显示 ID 为fromFile的下一个选项卡，并且它应该隐藏 ID为 fromDB和email的选项卡。有人可以帮我吗？如何使用 Jquery？

4

2 回答 2

0

如何使用 JavaScript 使 DIV 可见和不可见

只是添加到这个：

onchange 事件应使用 java 脚本函数注册。此函数将读取选择框中的当前选定值。

根据该值，仅使所需的 div 可见，其余全部隐藏。

于 2013-04-02T06:27:17.327 回答
0 
$('#dataloadType').live('change',function(){
  var value = $(this).val();
  $('#tabs').tabs('select',value);
});
于 2013-04-02T06:42:13.683 回答