现在我们用的是 Bootstrap 的 Data 接口，让列表群组可以切换显示标签内容 .. 这个行为我们也可以使用 JavaScript 去配置一一上..

可以先去掉在列表群组项目上添加的 data-toggle 属性 .. 然后在这个包装上再添加一个 id .. 可以叫它 tab-demo ..

打开自定义的脚本 ... 添加一个 list .. 它的值可以是用 jquery 找到 #tab-demo .list-group 下面的 a 标签 .. 就是列表群组里面的那些项目 ..

下面再用一下 list 的 click 方法监听并且处理一下点击事件 .. 一个回调 .. 有个 event 参数，表示事件对象 .. 里面先用一下 event.preventDefault() 防止元素的默认的行为 ..

再用一下 jquery 处理一下 this .. 接着再用一下 tab 这个方法 .. 给它一个 show ..

再去试一下 .. 按下列表群组里的项目 .. 可以显示对应的内容 ..

事件

再去了解一下 tab 相关的事件 .. 回到自定义脚本 .. 用一下 list 的 on 方法，监听一下 show.bs.tab .. 显示标签内容的时候会触发这个事件 .. 一个 event 参数 ...

在方法里面，可以在控制台上输出点东西 .. 一个字符模板 .. 添加点静态文字 .. 开始显示： .. 再加上 event.target ，用一下 getAttribute 方法，得到 href 属性的值 ..

然后复制几份 ... 修改一下 .. 完全显示标签内容以后，会发生 shown.bs.tab 这个事件 ..

开始隐藏标签内容的时候，会发生 hide.bs.tab ...

完全隐藏标签内容以后，又会发生一个 hidden.bs.tab ..

回到浏览器，打开控制台 ..

打开一个标签内容 ...

之前显示的是 html 标签内容 .. 打开 css 这个标签内容的时候，会先隐藏 html 标签 .. 然后开始显示 css 的标签内容 .. 接着 html 内容完全隐藏 .. 然后又会完全显示 css 标签内容 ...