我试图使用html和jQuery动态加载一些Tabs。输入来自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]);
}
}
结果:
因为你的代码格式错了。 我们来看看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类。 Bootstrap也有一个标签组件,但这次我使用了jQuery UI。 更新 是的,我可以看到有一个迹象表明你曾尝试过Bootstrap标签。 (class =“淡入淡出”)我假设您使用Bootstrap v3-因为您使用了类,面板。 jQuery UI和Bootstrap之间没有太大区别。我在jsfiddle留下了评论。