HTML代码
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>demo</title>
<style type="text/css">
html,body,nav,ul,table{margin: 0; padding: 0;}
.options{ display: inline-block; height: 30px; width: 70px; background: #ddd; text-align: center; line-height: 30px;}
a.options{ color: #000; text-decoration: none; }
.nav-box{ background: #39F; }
#list li{ height: 28px; width: 200px; border: 1px solid #ddd; }
#tab{ display: none; }
</style>
</head>
<body>
<nav id="nav">
<a href="#" id="nav-a" class="options nav-box">A</a>
<a href="#" id="nav-b" class="options">B</a>
</nav>
<ul id="list">
</ul>
<table id="tab" border="1">
</table>
</body>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</html>
JS代码
$("#nav-a").click(function() {
//隐藏
$("#tab").hide();
//显示
$("#list").show();
$("#nav-a").addClass('nav-box');
$("#nav-b").removeClass('nav-box');
});
$("#nav-b").click(function() {
//隐藏
$("#list").hide();
//显示
$("#tab").show();
$("#nav-b").addClass('nav-box');
$("#nav-a").removeClass('nav-box');
});
/**
* 非ES6新特性
*/
// $("#nav-a").on("click", (function() {
// $.ajax({
// url: 'data.json',
// type: 'get',
// dataType: 'json',
// error: function(error) {
// alert(error);
// },
// success: function(data) {
// $("#list").html("");
// for (var i = 0; i < data.length; i++) {
// //动态拼接
// var temphtml = $("#list").html() + '<li class="list">name:' + data[i].name + ',age:' + data[i].age + "</li>";
// $("#list").html(temphtml);
// }
// }
// });
// })());
/**
* 使用ES6新特性
*/
$("#nav-a").on("click", (() => {
$.ajax({
url: 'data.json',
type: 'get',
dataType: 'json',
error: error => alert(error),
success: data => {
$("#list").html("");
let temphtml = "";
data.map(item => {
temphtml += `<li class="list">name:${item.name},age:${item.age}</li>`
})
$("#list").html(temphtml);
}
});
})())
$("#nav-b").on("click", () => {
$.ajax({
url: 'data.json',
type: 'get',
dataType: 'json',
error: error => alert(error),
success: data => {
$("#tab").html("");
let namehtml = "",
agehtml = "",
titlehtml = "",
alltitle = "",
allhtml = "";
for (var key in data[0]) {
titlehtml += `<th>${key}</th>`
}
alltitle = `<tr>${titlehtml}</tr>`
data.map(item => {
//动态拼接
namehtml = `<td class="name">${item.name}</td>`
agehtml = `<td class="age">${item.age}</td>`
allhtml += `<tr>${namehtml}${agehtml}</tr>`
})
$("#tab").html(alltitle + allhtml);
}
});
});
JSON文件
[{
"name": "tammy",
"age": 21
}, {
"name": "job",
"age": 22
}, {
"name": "tom",
"age": 19
}]