javascript - 使用 html 和 jQuery 以及来自 Java 的输入动态加载选项卡

Question

我正在尝试使用 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]);
    }
}

结果:

Answer 1

因为你的代码格式错误。
让我们看一下 jQuery UI 选项卡的文档。 Link

所以，基本格式是......

<!-- You need a div, which contains element all related to tabs -->
<!-- then you can use $("#your-tab").tabs(); -->
<div id="your-tab">
  <!-- What is the connection between list and content? (list:href - content:id) -->
  <ul id="tab-header">
    <li href="#tab1"></li>
    <li href="#tab2"></li>
  </ul>
  <!-- It's okay, if they have a parent div, I think. -->
  <div id="tab1>content1</div>
  <div id="tab2>content2</div>
</div>

这是jsfiddle .

最后，我可以看出您使用了引导类。Bootstrap 也有一个选项卡组件，但这次我使用了 jQuery UI。

已更新
是的，我可以看到有一个迹象表明您曾经尝试过 Bootstrap 选项卡。 (类=“淡入事件”)我假设你使用 Bootstrap v3- 因为你使用了一个类，面板。jQuery UI 和 Bootstrap 之间没有太大区别。我在 jsfiddle 中留下了评论。

BootStrap v3 version