我们通过查阅文档，， 给button的data-toggle属性设置为”button”，可以使其变成点击后自动呈现被选中的状态。
所以我们给classmate的button添加属性data-toggle=”button”。
此时又出现了另一个问题，我想接下去点击其他classmate的时候，原来点的还是处于激活状态，怎么办？
通过查阅, button的class赋值有active时，才会呈现被选中的状态，也就是说，上面的设定，也就是bootstrap做了这么一件事情：当data-toggle=”button”的按钮被点击时，自动把active添加到class里，此时呈现被选中状态，当再次被点击时，自动把active从class里移除，就呈现未被选中的状态。
也就是说，我们只要自己去做这个操作，比如在点击classmate时，我可以把所有的classmate按钮的active都从class属性里移除，这样点击完成后，只有我最新点击的Button处于active状态。
因此，只需要在classmate按钮的click函数里加入这样的语句：
复制代码 代码如下:
$(".btn-classmate").attr("class","btn btn-default btn-classmate btn-info");
效果如下图：
4、美化按钮外观
找到bootstrap里CSS关于按钮的部分：
按照教程修改，我这里只是简单的修改了一下按钮的颜色，大家可以按照需求自己改。效果如下图：
5、 HTML页面和Javascript代码的分离
其实分为两步：
第一步：把javascript代码放到js文件里，并在HTML文件里链接上。
第二步：把javascript里复用，或者有明确功能的代码块，写进一个函数里，直接调用函数。
由于这两步都比较简单，任何学过编程语言的应该都会。我就不展开写了。
值得注意的是，在链接JS文件时，要注意顺序。
比如Bootstrap的JS文件，里面的代码是基于Jquery写的，用了很多Jquery的函数，所以Jquery的JS文件要在Bootstrap的JS文件之前声明链接。
同理，咱们的JS文件时基于Bootstrap，所以要在Bootstrap之后，不然代码就不起作用了。
最后国际惯例，贴一下相关的代码：
getClassmate.html:
<!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:100px; } #btn-group-vertical-classmates { overflow-y:auto; overflow-x:auto; height:500px; } button { text-overflow: ellipsis; overflow: hidden; border-radius: 0px; } #context_div { overflow-y:auto; overflow-x:auto; height:500px; } </style> </head> <body> <div> <div> <div> <h4> <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> <span aria-hidden="true"></span> Click this to show/hide class </a> </h4> </div> <div> <div> <div> <div role="group" aria-label="..."> <!-- where classes show--> </div> </div> </div> </div> </div> <br></br> <div> <div role="group" aria-label="..."> <!-- where classmates show--> <button type="button">Click class to show classmate.</button> </div> <div> <div> <div> <p>Click classmate to show details.</p> </div> </div> </div> </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 src="https://www.jb51.net/js/script_getClassmate.js"></script> </body> </html>
script_getClassmate.js: