所有标签内容都在页面加载。我只想显示活动标签数据 [英] All tab content is coming on page load. I want only active tab data to be displayed

查看：125
本文介绍了所有标签内容都在页面加载。我只想显示活动标签数据的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

I am using below code to display the json data into tabs using javascript. I am able to display the data in UI. But it is not coming proper tab format. Tab click also not working. Could you please help me to resolve my issue. Below is my code:

<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输出如下所示：
在此输入图片说明

The UI ouput is coming as shown in url : enter image description here

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

I am facing problem while displaying tab content in proper format and tab click not working. Please help me to resolve my issue

推荐答案

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

This plnkr demo will do the job, http://plnkr.co/edit/xlLwsoSlCzk4qsG3ZMKH?p=preview

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

And, here is the code with static data, you can make changes accordingly to perform ajax call for dynamic data.

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

这篇关于所有标签内容都在页面加载。我只想显示活动标签数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
Java开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆