ㄧ.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