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

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

当我选择每个选项卡时，它会带下划线；但是，不会显示该面板

HTML:

营地

JS:

$（文档）.ready（函数（）{
//包括通用菜单和修改
$（“#includedContent”）.load（“Menu.html”，function（）{
$（“#liHike”）.removeClass（“禁用”）；
$（“#liEvent”）.removeClass（“禁用”）；
$（“#liPenPal”）.removeClass（“禁用”）；
});
$（'[data toggle=“tooltip”]'）。tooltip（）；
displayCamp（）；//获取现有营地的详细信息
$（“#tabHeading”）.tabs({
加载：函数（事件、用户界面）{
}
});
}); // 结束文件.ready
函数displayCamp（）{
$（'#ajaxGetUserServletResponse1'）。文本（''；
sessionStorage.setItem（'ssCamp'，'packholiday'）；
var dataToBeSent={
ssYMID:sessionStorage.getItem（'ssYMID'），
ssCamp:sessionStorage.getItem（'ssCamp'），
};
//获取营地详细信息
$.ajax({
url:'CampView'，//您的Servlet映射或JSP（不建议使用）
数据：dataToBeSent，
键入：“POST”，
缓存：false
})
.fail（函数（jqXHR、textStatus、errorshown）{
//警报（jqXHR.responseText）；
if（jqXHR.responseText.includes（'No-camps'））{
$（'ajaxGetUserServletResponse'）.text（'No camps'）；
}否则{
$（'#ajaxGetUserServletResponse'）.text（'获取联接数据时出错'）；
}
$（“#开始日期”）.focus（）；
})
.完成（功能（响应JSON1A）{
//用于填充选项卡的JSON响应
数据类型：“json”；
//活动结构为：
//字符串eventId、字符串cdId、字符串eventType、，
//字符串eventDateStart、字符串eventDateEnd、字符串eventLocation、字符串eventDetails、，
//字符串eventNights、字符串eventNightsBuilding、字符串eventNightsCanvas、字符串eventPicture、，
//字符串eventKm、字符串eventKmActual、字符串eventKmOffset
//添加选项卡标题
$（“#tabHeading”）.find（“li”）.remove（）；
var headingItems=''；
对于（变量i=0；i

结果:

---

因为您的代码格式错误。
让我们看看jQueryUI选项卡的文档

所以，基本格式是

<!-- 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>

内容2

给你

最后，我可以告诉您使用引导类。 Bootstrap还有一个选项卡组件，但这次我使用了jQueryUI。

更新
是的，我看到有迹象表明你曾经尝试过引导标签。（class=“淡入激活”） 我假设您使用BootstrapV3，因为您使用了一个类，panel。 jQueryUI和Bootstrap之间没有太大区别。 我在jsfiddle中留下了评论

我有两个“越过彩虹”的问题，因此我更改了href=“#”+obj.eventId+”和“”（eventId是唯一的），然后你的回答起了作用。额外的分数，如果你能提供一个引导回答我，因为我无法得到工作：-）

$(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]);
    }
}

<!-- 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>