Ads Top

How to create dynamic tabs in javascript with JSON data?

Custom Javascript tab code

View code demo

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>

    var classStu = {
        class1 : [
            {name:'sheo1', contact:'4574622321'},
            {name:'Raj1', contact:'7774622321'},
            {name:'Satya1', contact:'9874622321'}
        ],
        class2 : [
            {name:'sheo2', contact:'4574622321'},
            {name:'Raj2', contact:'7774622321'},
            {name:'Satya2', contact:'9874622321'}
        ],
        class3 : [
            {name:'sheo3', contact:'4574622321'},
            {name:'Raj3', contact:'7774622321'},
            {name:'Satya3', contact:'9874622321'}
        ]
    };

    var act = 'class1';
    function pageData(){
       var studenInfo = Object.keys(classStu);

       var text = '<ul>';
       for(var i = 0; i<=studenInfo.length-1; i++){
           text+= "<li id="+studenInfo[i]+" onclick=tabClick('"+studenInfo[i]+"')>"+studenInfo[i]+"</li>";
       }
       text+= '</ul>';
       document.getElementById('studentTab').innerHTML = text;

       document.getElementById(act).style.background = '#0fb';

       tabClick('class1');

   }

function tabClick(val){
   var selectedClass = classStu[val];

   var text = '<ul>';
   for(var i = 0; i<selectedClass.length; i++){
      text+= '<li>'+selectedClass[i].name+' '+selectedClass[i].contact+'</li>';
   }
   text+= '</ul>';
   document.getElementById('contentData').innerHTML = text;

   document.getElementById(act).style.background = 'transparent';
   act=val;
   document.getElementById(act).style.background = '#0fb';

}
 
</script>
<style>
#studentTab ul{ list-style: none}
 #studentTab ul li{ display: inline-block;}
</style>
</head>

<body onload="pageData()">
<div id="studentTab"></div>
<div id="contentData"></div>
</body>
</html>


 



No comments:

Copyright Reserved to Anything Learn. Powered by Blogger.