所有标签内容都在页面加载。 我只想显示活动标签数据

我使用下面的代码使用javascript将json数据显示到选项卡中。 我能够在UI中显示数据。 但它没有适当的标签格式。 标签单击也不起作用。 你能帮我解决一下我的问题吗？ 以下是我的代码：

 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('
' + uniueTabs[i].area + '
'); var div = '
'; for (var j = 0; j < uniueTabs[i].tabContent.length; j++) { var obj = uniueTabs[i].tabContent[j]; div += '
' + obj.projectdes + '
'; } $('.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; }   
 
 
 
 
   

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所示： 在此处输入图像描述

我以正确的格式显示标签内容并且标签点击不起作用时遇到问题。 请帮我解决我的问题

Answer 1

这个plnkr演示将完成这项工作， http： //plnkr.co/edit/xlLwsoSlCzk4qsG3ZMKH？p = preview

并且，这里是带有静态数据的代码，您可以相应地进行更改以对动态数据执行ajax调用。