所谓CSS选择器，就是上述代码中的“#btn-group-vertical-classes”和“button”，即花括号上面的一行代码。CSS选择器有多重使用方法，可以通过W3SCHOOL网站查到相关方法。
因为CSS样式表有三种加载方式（CSS文件；<head>里的<style>标签，HTML元素里的style属性，生效优先级顺序为： “元素上的style” > “文件头上的style元素” >“外部样式文件”，），我们又引用了BootStrap的CSS，所以会涉及到覆写问题，就是说有些CSS样式你在head里的<style>标签里设置好了，但是它不work（例如上述<style>里button的border-radius设置不work）。从“一定会work”和“耦合度最低(即最方便修改)”的角度，此时推荐两种方法：
<1> 直接在元素标签里写style属性。这是最优先的，所以一定会work。
<2> 修改你链接的BootStrap CSS文件，一劳永逸，以后加入了新的元素，也不用一个个重新写style属性。这里要求你一定要把CSS文件下载下来，而不是引用链接。
由于我们这个网页很小，所以我采取了方法一。
4．用Ajax实现数据获取、交互和动态加载。
问我怎么知道用Ajax? 百度去搜，或者问会前端技术的人。
Ajax最核心的地方在于可以局部刷新，而不用整个页面都刷新。这里还是先查阅Ajax技术的相关文档（上面三个网站，以及各种百度）。由于要从Json文件里取数据，所以参考了Jquery（因为BootStrap的JS是基于Jquery的，所Jquery的方法都work，这个知识点也是我搜资料的时候搜到的）的Ajax手册，选取了getJson函数，另外，参考 选取each函数作为解析的方法。
代码实现的话，主要牵扯到遍历(for语句)、判断(if语句)，以及对HTML元素的操作，添加子元素，修改属性值啥的。
关于具体页面怎么写的，写的太详细也没意思，我直接把代码贴上来。
跑demo的时候要注意几点：chrome好像限制了直接在本地读取文件内容，所以你要把整个项目放在Apache的htdocs文件夹里。然后跑起来。关于Apache如何安装，我的前面的blog有很详细的介绍。如何使用，请大家百度吧。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta content="width=device-width, initial-scale=1"> <title>getClassmate</title> <!-- Bootstrap --> <link href="https://www.jb51.net/css/bootstrap.min.css"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> <![endif]--> <style type="text/css"> #btn-group-vertical-classes { overflow-y:auto; overflow-x:auto; height:150px; } #btn-group-vertical-classmates { overflow-y:auto; overflow-x:auto; height:150px; } button { text-overflow: ellipsis; overflow: hidden; border-radius: 0px; } </style> </head> <body> <div> <br></br> <div> <div role="group" aria-label="..."> <!-- where classes show--> </div> <div role="group" aria-label="..."> <!-- where classmates show--> <button type="button">Click class to show classmate.</button> </div> </div> <br></br> <div> <form role="form"> <div> <div> <div> <p>Click classmate to show details.</p> </div> </div> </div> </form> </div> </div> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://www.jb51.net/js/jquery-3.0.0.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="https://www.jb51.net/js/bootstrap.min.js"></script> <script> $(document).ready(function(){ $.getJSON("resource/classmates.json",function(result){ $.each(result, function(i, field){ var tmp_button=$('<button type="button" data-toggle="button" chosen_state=0></button>').text(i); tmp_button.attr("title",i); $("#btn-group-vertical-classes").append(tmp_button); }); $(".btn.btn-default.btn-class").click(function(){ var tmp_chosen=Number($(this).attr("chosen_state"))^1; $(this).attr("chosen_state",String(tmp_chosen)); $("#btn-group-vertical-classmates").empty(); var chosen_list=new Array(); $(".btn.btn-default.btn-class").filter(function(){ judgeflag=false; if($(this).attr("chosen_state")=="1"){ judgeflag=true; chosen_list.push($(this).text()); } return judgeflag; }); $.each(result,function(i,field){ var chosen_list_x; for (chosen_list_x in chosen_list){ if(chosen_list[chosen_list_x]==i){ $.each(field,function(j,field2){ var tmp_button=$('<button type="button" chosen_state=0></button>').text(j); tmp_button.attr("title",j); $("#btn-group-vertical-classmates").append(tmp_button); }); } } }); $(".btn.btn-default.btn-classmate").click(function(){ var selected_classmate=$(this).text(); var classmate_context_item; $("#context_div").empty(); $.each(result,function(i,field){ $.each(field,function(j,field2){ if(j==selected_classmate){ $.each(field2,function(k,field3){ classmate_context_item=k + ": " + field3; var tmp_p=$('<p></p>').text(classmate_context_item); $("#context_div").append(tmp_p); }); } }); }); }); }); }); }) </script> </body> </html>
您可能感兴趣的文章: