Postavicu ovde kod a uploadovacu i .html fajl sa javascriptom i .json fajl.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function() {
var div = $('.profile');
var ul = $('ul');
var people = [];
$.getJSON('people.json', function(data) {
$.each(data.person, function(i, f) {
people.push([f.firstName, f.lastName, f.job, f.image]);
ul.append('<li><a href="#' + i + '">' + f.firstName + '</a></li>')
});
$('a').on('click', addContent);
});
});
$(function() {
var div = $('.profile');
var ul = $('ul');
var people = [];
$.getJSON('people.json', function(data) {
$.each(data.person, function(i, f) {
people.push([f.firstName, f.lastName, f.job, f.image]);
ul.append('<li><a href="#' + i + '">' + f.firstName + '</a></li>')
});
$('a').on('click', addContent);
});
function addContent(e) {
e.preventDefault();
var hash = this.hash.replace('#','');
div.html('');
div.append('<img src="images/' + people[hash][3] + '">');
div.append('<p><b>Name:</b> ' + people[hash][0] + ' ' + people[hash][1] + '</p>');
div.append('<p><b>Job:</b> ' + people[hash][2] + '</p>');
}
});
</script>
</head>
<body>
<div class="wrapper">
<ul></ul>
<div class="profile"></div>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function() {
var div = $('.profile');
var ul = $('ul');
var people = [];
$.getJSON('people.json', function(data) {
$.each(data.person, function(i, f) {
people.push([f.firstName, f.lastName, f.job, f.image]);
ul.append('<li><a href="#' + i + '">' + f.firstName + '</a></li>')
});
$('a').on('click', addContent);
});
});
$(function() {
var div = $('.profile');
var ul = $('ul');
var people = [];
$.getJSON('people.json', function(data) {
$.each(data.person, function(i, f) {
people.push([f.firstName, f.lastName, f.job, f.image]);
ul.append('<li><a href="#' + i + '">' + f.firstName + '</a></li>')
});
$('a').on('click', addContent);
});
function addContent(e) {
e.preventDefault();
var hash = this.hash.replace('#','');
div.html('');
div.append('<img src="images/' + people[hash][3] + '">');
div.append('<p><b>Name:</b> ' + people[hash][0] + ' ' + people[hash][1] + '</p>');
div.append('<p><b>Job:</b> ' + people[hash][2] + '</p>');
}
});
</script>
</head>
<body>
<div class="wrapper">
<ul></ul>
<div class="profile"></div>
</div>
</body>
</html>