JSP でブートストラップを使用してタブを作成しました。最初のタブには選択タグが含まれており、選択した値に基づいて、他のいくつかのタブが表示され、いくつかのタブが非表示になります。
これが私のコードです
<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>
<div id="fromDB" class="selectDataloadType" style="display: none;">
<li><a href="#fromDB" target="main"
data-toggle="tab">Data Load Database</a></li> </div>
<div id="fromFile" class="selectDataloadType" style="display: none;">
<li><a href="#fromFile" target="main"
data-toggle="tab">Data Load File</a></li> </div>
<div id="email" class="selectDataloadType" style="display: none;">
<li><a href="#email" target="main"
data-toggle="tab">Data Load Email</a></li> </div>
<div id="webServices" class="selectDataloadType" style="display: none;">
<li><a href="#webServices" target="main"
data-toggle="tab">Data Load Web</a></li> </div>
<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>
<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>
<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 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="webServices">
<iframe src="WebService.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>
そして、私のスクリプトは
<script>
$(function() {
$('#dataloadType').change(function(){
$('.selectDataloadType').hide();
$('#' + $(this).val()).show();
var value = $(this).val();
$('#tabs').tabs('select',value);
});
});
</script>
ここで問題があります。
<li>タグ内の 3 つは、SELECT 値に基づいて非表示および表示されるため、DIV タグを使用しています。スクリプトは正常に動作しており、選択した値に基づくタブのみが表示されます。しかし、本当の問題は、表示されるのはタブではないということです。(DIV を使用する 3 つの LI タグはタグとして表示されません)リンクとしてのみ表示され、そのタブを開くことができません。私は何をすべきか？
このように表示されます
