如何解决所有选项卡内容即将加载页面我只希望显示活动的标签数据
这个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将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","project": "project 1","projectdes": "This is Class 2nd project"
},"cus": "pending","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,.2);
background: #ad1c1c;
background: linear-gradient(220deg,transparent 10px,#ad1c1c 10px);
text-shadow: 0 1px 0 rgba(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,#c93434 10px);
}
#tabs a:focus {
outline: 0;
}
#tabs #current a {
background: #fff;
background: linear-gradient(220deg,#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所示： 在此处输入图像描述
在以正确的格式显示标签内容并且标签单击不起作用时，我遇到问题。请帮助我解决我的问题
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。