json数据，采用折叠面板展示书单。
1.html代码：
<!DOCTYPE html> <html lang="zh-cn"> <head> <!-- 父路径 --> <!-- <base href="/demo/"> --> <!-- 页面编码 --> <meta charset="UTF-8"> <!-- 响应式布局 --> <meta name="viewport" content="width=device-width,initial-scale=1"> <!-- Bootstrap样式文件 --> <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> <!-- 自定义样式文件 --> <link rel="stylesheet" href="styles/site.css"> <!-- Jquery脚本文件 --> <script src="scripts/jquery.min.js"></script> <!-- Bootstrap脚本插件文件 --> <script src="bootstrap/js/bootstrap.min.js"></script> <!-- 标签名称 --> <title>component</title> </head> <body class="container"> <header class="page-header"> <h1 class="text-capitalize">skiff</h1> </header> <div> <div class="row"> <div class="col-sm-3"> <!-- 折叠面板 --> <div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#comp"> 计算机类 </a></h4> </div> <div id="comp" class="panel-collapse collapse in"> <div> </div> </div> </div> <div class="panel panel-info"> <div class="panel-heading"> <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#cult"> 文学类 </a></h4> </div> <div id="cult" class="panel-collapse collapse"> <div> </div> </div> </div> <div class="panel panel-success"> <div class="panel-heading"> <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#chrd"> 儿童类 </a></h4> </div> <div id="chrd" class="panel-collapse collapse"> <div> </div> </div> </div> </div> </div> <div class="col-sm-9"> <div class="panel panel-info"> <div class="panel-heading"> </div> <div class="panel-body"> <blockquote> <h2><span id="title"></span></h2> <footer> 作者：<span id="author"></span> </footer> </blockquote> <div class="row"> <div class="col-sm-6"> <img id="img" alt="" class="img-responsive img-rounded"> </div> <div class="col-sm-6"> <p class="lead"> 价格： <span class="glyphicon glyphicon-usd"></span> <span id="price"></span> </p> <p class="lead"> 出版日期： <code> <span id="pubdate"></span> </code> </p> <p class="lead"> 类别： <span id="category"></span> </p> <p class="text-right"> <button type="button" class="btn btn-primary btn-block btn-lg"> <span class="glyphicon glyphicon-shopping-cart"></span> Add to cart </button> </p> </div> </div> </div> </div> </div> </div> <script> var comps = new Array(); var cults = new Array(); var chrds = new Array();//儿童类 var a = 0; var b = 0; var c = 0; function showBookInfo(book) { $("#title").html(book.Title); $("#author").html(book.Author); $("#price").html(book.Price); $("#pubdate").html(book.PubDate); $("#category").html(book.Category.Name); $("#img").attr("src", "images/Koala.jpg"); } $(function() { $.getJSON("json/books.json", null, function(data) { $(data).each(function(index, book) { if (book.Category.Id == 1) { comps[a++] = book; } if (book.Category.Id == 2) { cults[b++] = book; } if (book.Category.Id == 3) { chrds[c++] = book; } }); $(comps).each(function(index, book) { $("#comp").append($("<div>").addClass("list-group").append($("<a>").addClass("list-group-item").html(book.Title).attr("href", "javascript:void(0)").data("b", book).on("click", function() { var b = $(this).data("b"); showBookInfo(b); }))); }); $(cults).each(function(index, book) { $("#cult").append($("<div>").addClass("list-group").append($("<a>").addClass("list-group-item").html(book.Title).attr("href", "javascript:void(0)").data("b", book).on("click", function() { var b = $(this).data("b"); showBookInfo(b); }))); }); $(chrds).each(function(index, book) { $("#chrd").append($("<div>").addClass("list-group").append($("<a>").addClass("list-group-item").html(book.Title).attr("href", "javascript:void(0)").data("b", book).on("click", function() { var b = $(this).data("b"); showBookInfo(b); }))); }); $("a[href='#comp']").append($("<span>").addClass("badge pull-right").html(comps.length)); $("a[href='#cult']").append($("<span>").addClass("badge pull-right").html(cults.length)); $("a[href='#chrd']").append($("<span>").addClass("badge pull-right").html(chrds.length)); }); }); </script> </div> <footer class="navbar-fixed-bottom text-center"> © 2015 <span class="glyphicon glyphicon-copyright-mark"></span> </footer> </body> </html> 2.json数据：
[ { "Id": 1, "Title": "JAVA LOGIC", "Author": "Oracle", "Price": 10.99, "PubDate": "2010-01-01", "Category": { "Id": 1, "Name": "计算机类" } }, { "Id": 2, "Title": "HTML", "Author": "W3C", "Price": 20.99, "PubDate": "2010-02-01", "Category": { "Id": 1, "Name": "计算机类" } }, { "Id": 3, "Title": "SQL BASIC", "Author": "Microsoft", "Price": 30.99, "PubDate": "2010-03-01", "Category": { "Id": 1, "Name": "计算机类" } }, { "Id": 4, "Title": "C# LOGIC", "Author": "Microsoft", "Price": 40.99, "PubDate": "2010-04-01", "Category": { "Id": 1, "Name": "计算机类" } }, { "Id": 5, "Title": "JAVA OOP", "Author": "Oracle", "Price": 50.99, "PubDate": "2010-05-01", "Category": { "Id": 1, "Name": "计算机类" } }, { "Id": 6, "Title": "JAVASCRIPT", "Author": "W3C", "Price": 10.99, "PubDate": "2010-01-01", "Category": { "Id": 1, "Name": "计算机类" } }, { "Id": 7, "Title": "JSP", "Author": "Oracle", "Price": 20.99, "PubDate": "2010-02-01", "Category": { "Id": 1, "Name": "计算机类" } }, { "Id": 8, "Title": "SQL ADVANCE", "Author": "Microsoft", "Price": 30.99, "PubDate": "2010-03-01", "Category": { "Id": 1, "Name": "计算机类" } }, { "Id": 9, "Title": "C# OOP", "Author": "Microsoft", "Price": 40.99, "PubDate": "2010-04-01", "Category": { "Id": 1, "Name": "计算机类" } }, { "Id": 10, "Title": "NTIER", "Author": "Microsoft", "Price": 50.99, "PubDate": "2010-05-01", "Category": { "Id": 1, "Name": "计算机类" } }, { "Id": 11, "Title": "ASP.NET", "Author": "Microsoft", "Price": 10.99, "PubDate": "2010-01-01", "Category": { "Id": 1, "Name": "计算机类" } }, { "Id": 12, "Title": "AJAX", "Author": "Microsoft", "Price": 20.99, "PubDate": "2010-02-01", "Category": { "Id": 1, "Name": "计算机类" } }, { "Id": 13, "Title": "HIBERNATE", "Author": "Oracle", "Price": 30.99, "PubDate": "2010-03-01", "Category": { "Id": 1, "Name": "计算机类" } }, { "Id": 14, "Title": "STRUTS", "Author": "Oracle", "Price": 40.99, "PubDate": "2010-04-01", "Category": { "Id": 1, "Name": "计算机类" } }, { "Id": 15, "Title": "SPRING", "Author": "Oracle", "Price": 50.99, "PubDate": "2010-05-01", "Category": { "Id": 1, "Name": "计算机类" } }, { "Id": 16, "Title": "西游记", "Author": "吴承恩", "Price": 10.99, "PubDate": "2010-01-01", "Category": { "Id": 2, "Name": "文学类" } }, { "Id": 17, "Title": "三国演义", "Author": "罗贯中", "Price": 20.99, "PubDate": "2010-02-01", "Category": { "Id": 2, "Name": "文学类" } }, { "Id": 18, "Title": "水浒传", "Author": "施耐庵", "Price": 30.99, "PubDate": "2010-03-01", "Category": { "Id": 2, "Name": "文学类" } }, { "Id": 19, "Title": "红楼梦", "Author": "曹雪芹", "Price": 40.99, "PubDate": "2010-04-01", "Category": { "Id": 2, "Name": "文学类" } }, { "Id": 20, "Title": "傲慢与偏见", "Author": "简奥斯汀", "Price": 10.99, "PubDate": "2010-01-01", "Category": { "Id": 2, "Name": "文学类" } }, { "Id": 21, "Title": "呼啸山庄", "Author": "艾米莉勃朗特", "Price": 20.99, "PubDate": "2010-02-01", "Category": { "Id": 2, "Name": "文学类" } }, { "Id": 22, "Title": "战争与和平", "Author": "列夫托尔斯泰", "Price": 30.99, "PubDate": "2010-03-01", "Category": { "Id": 2, "Name": "文学类" } }, { "Id": 23, "Title": "红与黑", "Author": "司汤达", "Price": 40.99, "PubDate": "2010-04-01", "Category": { "Id": 2, "Name": "文学类" } }, { "Id": 24, "Title": "灰姑娘", "Author": "格林", "Price": 10.99, "PubDate": "2010-01-01", "Category": { "Id": 3, "Name": "儿童类" } }, { "Id": 25, "Title": "卖火柴的小女孩", "Author": "格林", "Price": 20.99, "PubDate": "2010-02-01", "Category": { "Id": 3, "Name": "儿童类" } }, { "Id": 26, "Title": "白雪公主", "Author": "格林", "Price": 30.99, "PubDate": "2010-03-01", "Category": { "Id": 3, "Name": "儿童类" } }, { "Id": 27, "Title": "睡美人", "Author": "格林", "Price": 40.99, "PubDate": "2010-04-01", "Category": { "Id": 3, "Name": "儿童类" } }, { "Id": 28, "Title": "小红帽", "Author": "安徒生", "Price": 10.99, "PubDate": "2010-05-01", "Category": { "Id": 3, "Name": "儿童类" } }, { "Id": 29, "Title": "拇指姑娘", "Author": "安徒生", "Price": 20.99, "PubDate": "2010-06-01", "Category": { "Id": 3, "Name": "儿童类" } }, { "Id": 30, "Title": "青蛙王子", "Author": "安徒生", "Price": 30.99, "PubDate": "2010-07-01", "Category": { "Id": 3, "Name": "儿童类" } }, { "Id": 31, "Title": "海的女儿", "Author": "安徒生", "Price": 40.99, "PubDate": "2010-08-01", "Category": { "Id": 3, "Name": "儿童类" } } ] 3.效果图：
