使用html和jQuery从Java输入动态加载选项卡

我正在尝试使用html和jQuery动态加载一些选项卡输入来自Java这些选项卡没有格式化为选项卡(我使用jQuery来激活它们)我试过将这个函数放在它的当前位置,加载选项卡的函数的开头和函数的结尾在功能结束时,负载被触发两次在每种情况下,所有选项卡内容都在第一个选项卡上。

当我选择每个选项卡时,它将变为带下划线;但是,面板不会显示。

HTML格式:

    <div id="campDisplay"  class="container-fluid" style="background-repeat: repeat; background-image: url('images/body-bg.jpg');">

        <div id="includedContent"></div>


        <form data-toggle="validator" role="form" id="showCampForm">
            <div class="page-header">
                <h1>Camps</h1>
            </div>
            <div class="col-md-12">
                <div class="panel with-nav-tabs panel-primary" id=panel-container>
                    <div id="tabHeading">
                        <ul>

                        </ul>
                    </div>

                    <div class="panel-body">
                        <div class="tab-content" id="tabContent">

                        </div>
                    </div>


                </div>
            </div>
        </form>
    </div>

JS公司:

$(document).ready(function(){

    //Include the common menu and amend
    $("#includedContent").load("Menu.html", function(){
        $("#liHike").removeClass("disabled");
        $("#liEvent").removeClass("disabled");
        $("#liPenPal").removeClass("disabled");
    });

    $('[data-toggle="tooltip"]').tooltip();

    displayCamp(); // get the existing camp details

    $("#tabHeading").tabs({
      load: function(event, ui) {
      }
    });

}); // end document.ready

function displayCamp() {

    $('#ajaxGetUserServletResponse1').text('');

    sessionStorage.setItem('ssCamp', 'Pack Holiday');

    var dataToBeSent  = {
            ssYMID : sessionStorage.getItem('ssYMID'),
            ssCamp : sessionStorage.getItem('ssCamp'),
    };

    //Get camp details
    $.ajax({
        url : 'CampView', // Your Servlet mapping or JSP(not suggested)
        data : dataToBeSent, 
        type : 'POST',
        cache: false
    })
    .fail (function(jqXHR, textStatus, errorThrown) {
        //alert(jqXHR.responseText);
        if(jqXHR.responseText.includes('No camps')){
                $('#ajaxGetUserServletResponse').text('No camps.');
            }else{
                $('#ajaxGetUserServletResponse').text('Error getting joined data.');
            }
        $("#startDate").focus();
    })
    .done(function(responseJson1a){
        // JSON response to populate the Tabs
        dataType: "json";

//      Event structure is:
//         String eventId, String cdId, String eventType, 
//         String eventDateStart, String eventDateEnd, String eventLocation, String eventDetails,
//         String eventNights, String eventNightsBuilding, String eventNightsCanvas, String eventPicture,
//         String eventKm, String eventKmActual, String eventKmOffset

        //Add Tab headings
        $("#tabHeading").find("li").remove();
        var headingItems = '';
        for(var i = 0; i < responseJson1a.length; i++) {
            var obj = responseJson1a[i];

            console.log(obj.eventLocation);
            headingItems += '<li id="' + i + '"><a href="#">' + obj.eventLocation + '</a></li>';
        }
        $("#tabHeading ul").append(headingItems);

        //Add Tab contents
        var contents = '';
        for(var i = 0; i < responseJson1a.length; i++) {
            var obj = responseJson1a[i];

            contents += '<div class="tab-pane fade in active" id="' + obj.eventLocation + '">';
            contents += '<h3>Menu 1</h3>';
            contents += '<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>';
            contents += '</div>';

            $("#tabContent").append(contents);
            contents = '';
        }
    })
}

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#campImage')
                .attr('src', e.target.result)
                .width(150)
                .height(200);
        };

        reader.readAsDataURL(input.files[0]);
    }
}

结果: