0

我在 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 标签未显示为标签）它仅显示为链接，我无法打开该选项卡。我该怎么办？

它的显示是这样的

在此处输入图像描述

4

1 回答 1

0

我得到了它的答案。不要添加DIV。LI相反，将id和类添加到LI本身

<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 id="fromDB" class="selectDataloadType" style="display: none;"><a
                        href="#fromDatabase" target="main" data-toggle="tab">Data Load
                            Database</a></li>
                    <li id="fromFile" class="selectDataloadType" style="display: none;"><a
                        href="#fromFiles" target="main" data-toggle="tab">Data Load
                            File</a></li>
                    <li id="email" class="selectDataloadType" style="display: none;"><a
                        href="#fromEmail" target="main" data-toggle="tab">Data Load
                            Email</a></li>
                    <li id="webServices" class="selectDataloadType"
                        style="display: none;"><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>
于 2013-04-03T09:14:26.417 回答