How to create dynamic tabs in javascript with JSON data?
Custom Javascript tab code
View code demo
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:
Note: Only a member of this blog may post a comment.