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>

ユーザーが[ファイルから] を選択すると、id が fromFileの次のタブが表示され、id がfromDBおよびemailのタブが非表示になります。誰かが私を助けることができますか？Jqueryの使い方は？

4

2 に答える 2

0

JavaScript を使用して DIV を表示および非表示にする方法

これに追加するだけです：

onchange イベントは、java-script 関数で登録する必要があります。この関数は、選択ボックスで現在選択されている値を読み取ります。

値に基づいて、必要な div のみを表示し、残りはすべて非表示にします。

于 2013-04-02T06:27:17.327 に答える