将标签添加到LI标签时，JSP选项卡不活动

Question

我在JSP中使用bootstrap创建了标签。第一个选项卡包含一个选择标记，并根据所选值显示一些其他选项卡，并隐藏一些选项卡。

这是我的代码

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

它显示如下

Answer 1

我得到了答案。不要在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>