这个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='https://www.6hehe.com/wenda/22214.html#tab-content-’ + i + ’'>’ + uniueTabs[i].area + ’</a></li>’); var div = ’<div 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='https://www.6hehe.com/wenda/22214.html#’ + i + ’' aria-controls='’ + i + ’' role='tab' data-toggle='tab'>’ + uniueTabs[i].area + ’</a></li>’);var div = ’<div role='tabpanel' 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 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所示： 在此处输入图像描述
在以正确的格式显示标签内容并且标签单击不起作用时，我遇到问题。请帮助我解决我的问题
