bootstrap practice 2

by ShaCP

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<ul class="nav nav-tabs" id="tab">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" >Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" >Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="messages-tab" data-toggle="tab" href="#messages">Messages</a>
  </li>
  <li class="nav-item" role="presentation">
    <a class="nav-link" id="settings-tab" data-toggle="tab" href="#settings" >Settings</a>
  </li>
</ul>
<div class="tab-content">
  <div class="tab-pane active" id="home">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div>
  <div class="tab-pane" id="profile"> Nam at neque orci. In vehicula metus eu euismod rhoncus.</div>
  <div class="tab-pane" id="messages">Pellentesque pharetra ligula sed efficitur ultricies. </div>
  <div class="tab-pane" id="settings">Quisque et congue metus, id rutrum purus. </div>
</div>

JavaScript

var triggerTabList = [].slice.call(document.querySelectorAll('#tab a'))
triggerTabList.forEach(function (triggerEl) {
  var tabTrigger = new bootstrap.Tab(triggerEl)

  triggerEl.addEventListener('click', function (event) {
    event.preventDefault()
    tabTrigger.show()
  })
})