Jquery 将DIV标记添加到LI标记时，JSP选项卡不活动

我已经在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>

我这里有个问题

在标签3中，用户使用DIV标签，因为这3个标签是隐藏的，并根据选择值显示。脚本工作正常，它将仅显示基于选定值的选项卡。但真正的问题是，将要显示的不是选项卡。使用DIV的3 LI标记未显示为标记，它仅显示为链接，我无法打开该选项卡。我该怎么办

它是这样显示的

---

我得到了答案。不要在LI中添加DIV。相反，将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>