Question

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

<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

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

Answer 1

这个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>

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

1 个答案: