38.Bootstrap(中文教程)元件：List group:方法与事件

ㄧ.List group:方法与事件

<div class="component" id="demo">  <div class="container">    <div class="row" id="tab-demo">      <div class="col-4">        <div class="list-group">          <a href="#html-content" class="list-group-item list-group-item-action active">HTML</a>          <a href="#css-content" class="list-group-item list-group-item-action">CSS</a>          <a href="#javascript-content" class="list-group-item list-group-item-action">JavaScript</a>        </div>      </div>      <div class="col-8">        <div class="tab-content">        <div class="tab-pane fade show active" id="html-content">hello html</div>            <div class="tab-pane fade" id="css-content">hello css</div>        <div class="tab-pane fade" id="javascript-content">hello javascript</div>       </div>      </div>    </div>  </div></div>.demo.component{  padding: 50px;}

js

const list = $('#tab-demo .list-group a');list.click(function(event){  event.preventDefault();  $(this).tab('show');});list.on('shown.bs.tab', function(event){  console.log(`开始显示:${event.target.getAttribute('href')}`);});list.on('shown.bs.tab', function(event){  console.log(`完全显示:${event.target.getAttribute('href')}`);});list.on('hide.bs.tab', function(event){  console.log(`开始隐藏:${event.target.getAttribute('href')}`);});list.on('hidden.bs.tab', function(event){  console.log(`完全隐藏:${event.target.getAttribute('href')}`);});

重点：

1.在.row加#tab-demo
2.js第一个事件跟前面data-toggle="list"的功能一样
3.后面都是监听

codepen
参考：bootstrap4