我正在使用下面的代码使用 javascript 将 json 数据显示到选项卡中。我能够在 UI 中显示数据。但它没有提供正确的选项卡格式。 Tab 单击也不起作用。您能帮我解决我的问题吗？下面是我的代码:
<script>
var responseText = [{
"area": "CSE",
"cus": "progress",
"project": "Project 1",
"projectdes": "Class 1st"
}, {
"area": "ECE",
"cus": "complered",
"project": "Project 2",
"projectdes": "This is class 1st Project"
}, {
"area": "IT",
"cus": "progress",
"project": "project 1",
"projectdes": "This is Class 2nd project"
}, {
"area": "IT",
"cus": "pending",
"project": "Project 2",
"projectdes": "This is class 2nd project"
}];
function showData() {
var uniueTabs = getUniqueLists(responseText);
for (var i = 0; i < uniueTabs.length; i++) {
$(#tabs).append('<li role="area" class="my-li'+i+'"><a href="#' + i +
'" aria-controls="' + i + '" role="tab" data-toggle="tab">' + uniueTabs[i].area +
'</a></li>');
var div = '<div role="tabpanel" class="tab-pane" area="' + i + '">';
for (var j = 0; j < uniueTabs[i].tabContent.length; j++) {
var obj = uniueTabs[i].tabContent[j];
div += '<div area="' + obj.project + '">' + obj.projectdes + '</div>';
}
$('.my-li'+i).append(div);
}
$('#tabs li').eq(0).addClass('active');
$('#tab-content div').eq(0).addClass('active');
}
function getUniqueLists(responseText) {
var resArr = [];
responseText.filter(function (x, i) {
if (resArr.indexOf(x.area) === -1) {
resArr.push(x.area);
}
})
//console.log(resArr);
return mergeDataAreaWise(resArr, responseText);
}
function mergeDataAreaWise(area, responseText) {
var tabList = [];
for (var i = 0; i < area.length; i++) {
tabList.push({
area: area[i],
tabContent: []
});
}
for (var i = 0; i < tabList.length; i++) {
for (var j = 0; j < responseText.length; j++) {
var Obj = {
cus: responseText[j].cus,
project: responseText[j].project,
projectdes: responseText[j].projectdes
}
var currentArea = responseText[j].area;
if (tabList[i].area === currentArea) {
tabList[i].tabContent.push(Obj);
}
}
}
console.log(tabList);
return tabList;
}
</script>
<body onload="showData()">
<div id="tabs" role="tablist">
<div id="tab-content">
</div>
</div>
</div>
</body>
</html>
CSS 文件:
#tabs {
overflow: auto;
width: 100%;
list-style: none;
margin: 0;
padding: 0;
}
#tabs li {
margin: 0;
padding: 0;
float: left;
}
#tabs a {
box-shadow: -4px 0 0 rgba(0, 0, 0, .2);
background: #ad1c1c;
background: linear-gradient(220deg, transparent 10px, #ad1c1c 10px);
text-shadow: 0 1px 0 rgba(0,0,0,.5);
color: #fff;
float: left;
font: bold 12px/35px 'Lucida sans', Arial, Helvetica;
height: 35px;
padding: 0 30px;
text-decoration: none;
}
#tabs a:hover {
background: #c93434;
background: linear-gradient(220deg, transparent 10px, #c93434 10px);
}
#tabs a:focus {
outline: 0;
}
#tabs #current a {
background: #fff;
background: linear-gradient(220deg, transparent 10px, #fff 10px);
text-shadow: none;
color: #333;
}
#content {
background-color: #fff;
background-image: linear-gradient(top, #fff, #ddd);
border-radius: 0 2px 2px 2px;
box-shadow: 0 2px 2px #000, 0 -1px 0 #fff inset;
padding: 30px;
}
#content div {
height: 220px;
}
UI 输出如 url 所示: enter image description here
我在以正确的格式显示选项卡内容时遇到问题，并且选项卡单击不起作用。请帮我解决我的问题
最佳答案
这个 plnkr 演示可以完成这项工作，http://plnkr.co/edit/xlLwsoSlCzk4qsG3ZMKH?p=preview
并且，这里是静态数据的代码，您可以进行相应更改以对动态数据进行ajax调用。
<html>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
var responseText = [{
"area": "CSE",
"cus": "progress",
"project": "Project 1",
"projectdes": "Class 1st"
}, {
"area": "ECE",
"cus": "complered",
"project": "Project 2",
"projectdes": "This is class 1st Project"
}, {
"area": "IT",
"cus": "progress",
"project": "project 1",
"projectdes": "This is Class 2nd project"
}, {
"area": "IT",
"cus": "pending",
"project": "Project 2",
"projectdes": "This is class 2nd project"
}];
function showData() {
var uniueTabs = getUniqueLists(responseText);
for (var i = 0; i < uniueTabs.length; i++) {
$('.nav-tabs').append('<li ><a href="#tab-content-' + i + '">' + uniueTabs[i].area + '</a></li>');
var div = '<div id="tab-content-' + i + '" class="tab-pane fade">';
for (var j = 0; j < uniueTabs[i].tabContent.length; j++) {
var obj = uniueTabs[i].tabContent[j];
div += '<p>' + obj.projectdes + '</p>';
}
$('.tab-content').append(div);
$('#tab-content-0').addClass('in active');
}
$('.nav-tabs li').eq(0).addClass('active');
setListner();
}
function getUniqueLists(responseText) {
var resArr = [];
responseText.filter(function (x, i) {
if (resArr.indexOf(x.area) === -1) {
resArr.push(x.area);
}
})
return mergeDataAreaWise(resArr, responseText);
}
function mergeDataAreaWise(area, responseText) {
var tabList = [];
for (var i = 0; i < area.length; i++) {
tabList.push({
area: area[i],
tabContent: []
});
}
for (var i = 0; i < tabList.length; i++) {
for (var j = 0; j < responseText.length; j++) {
var Obj = {
cus: responseText[j].cus,
project: responseText[j].project,
projectdes: responseText[j].projectdes
}
var currentArea = responseText[j].area;
if (tabList[i].area === currentArea) {
tabList[i].tabContent.push(Obj);
}
}
}
console.log(tabList);
return tabList;
}
function setListner () {
$(".nav-tabs a").click(function () {
$(this).tab('show');
});
}
</script>
<body onload="showData()">
<div class="container">
<ul class="nav nav-tabs">
</ul>
<div class="tab-content">
</div>
</div>
</body>
</html>
关于javascript - 所有选项卡内容均在页面加载时出现。我只想显示 Activity 选项卡数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48139346/