单击选项卡 Javascript 后更改 H1 中的文本

Question

I'm using Bootstrap 5 Tabs and pure JS. I want to change my H1 on the page when user click on another tab. This is HTML:

<div class="page-header container">
   <div class="row">
      <div class="col-12">
         <h1 itemprop="headline">Book an appointment</h1>
      </div>
   </div>
</div>
<ul id="booking-tabs" class="nav nav-tabs booking-tabs" role="tablist">
<li class="nav-item" role="presentation"><button id="in-clinic-tab" class="nav-link" role="tab" type="button" data-bs-toggle="tab" data-bs-target="#in-clinic" aria-controls="in-clinic" aria-selected="false">In Clinic</button></li>
<li class="nav-item" role="presentation"><button id="at-home-tab" class="nav-link active" role="tab" type="button" data-bs-toggle="tab" data-bs-target="#at-home" aria-controls="at-home" aria-selected="true">At Home</button></li>
<li class="nav-item" role="presentation"><button id="emergency-tab" class="nav-link" role="tab" type="button" data-bs-toggle="tab" data-bs-target="#emergency" aria-controls="emergency" aria-selected="false">Emergency</button></li>
</ul>
<div id="booking-tab-content" class="tab-content">
<div id="in-clinic" class="tab-pane fade show active" tabindex="0" role="tabpanel" aria-labelledby="in-clinic-tab">
<div class="clean-subtitle">Search for availabilities for appointments using our e-services portal.</div>
</div>
<div id="at-home" class="tab-pane fade" tabindex="0" role="tabpanel" aria-labelledby="at-home-tab">
<div class="clean-subtitle">Choose your service and request a booking through our operator.</div>
</div>
<div id="emergency" class="tab-pane fade" tabindex="0" role="tabpanel" aria-labelledby="emergency-tab">
<div class="clean-subtitle">Choose your service and request a booking through our operator.</div>
</div>
</div>
</div>
</div>
</div>

JS:

window.onload = function(){
   if (document.querySelector('.booking-tabs')) {
      let tabButton = document.querySelector('.booking-tabs .nav-item #at-home-tab');
      tabButton.addEventListener('click', function(){
         if (document.getElementById('at-home').classList.contains('active')) {
            document.querySelector('.page-header .row .col-12 h1').innerText = 'Request a Home Service';
         }
      })
   }
};

For example, I'll want to click on At home tab and change text of H1, but it's not working. Maybe I have error in code? In console I can't see any errors. Help, please to fix my JS

Answer 1

I tried your code at my end and i think it's working as you described. Did you include the bootstrap5 to your HTML?

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>