我在 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 中使用的是 DIV 标签，因为这 3 个标签是根据 SELECT 值隐藏和显示的。脚本工作正常，它将仅显示基于所选值的选项卡。但真正的问题是，将显示的不是选项卡。（使用 DIV 的 3 LI 标签未显示为标签）它仅显示为链接，我无法打开该选项卡。我该怎么办？
它的显示是这样的
