如何根据用户当前所在的页面部分更改链接的颜色？

Question

I have 4 sections horizontally placed in a container and a fixed navbar on top that has tabs for users to get to different sections of the page. I'm trying to make the color of text white when they are on the 'show' tab but if the user clicks on any other tab, I wanted the link to turn white. I thought of using JS to add/remove a class 'white-visible' or 'black-visible' depending on button click but not sure how to implement this in the quickest way.

Here is my code-

HTML

<div class="main-info">
      <div class="nav-container">
         <div class="nav-bar">

         <a href="#show" data-tab-target="#show" class="tab  white-visible">Show</a>
        <a href="#about" data-tab-target="#about" class="tab  white-visible">About</a>
        <a href="#lookbook" data-tab-target="#lookbook" class="tab  white-visible">Lookbook</a>
        <a href="#process" data-tab-target="#process" class="tab white-visible">Process</a>

     </div>
     <div class="info overlay">
        <div class="text">
           <a href="#">MA</a>
           <a href="#">Coming Soon</a>
           <a href="#">BA</a>
        </div>
        <a href="index.html" class="info-back">Back</a>
     </div>
  </div>
  <div class="tab-content">
     <span>
        <div id="show" data-tab-content class="active">
           <div class="video-wrapper">
              <video width="1920" height="1080" autoplay loop muted>
                 <source src="MA/SAMSON LEUNG MA COLLECTION AW20.mp4" type="video/mp4">
              </video>
           </div>
           <!-- video catwalk -->

        </div>
        <div id="about" data-tab-content>
           <div class="about-text">
           </div>
           <!-- about text -sum stills -->

        </div>
        <div id="lookbook" data-tab-content>
           <div class="ma-about">
              <h1>1dk</h1>
           </div>
           <!-- lookbook - videos + stills -->

        </div>
        <div id="process" data-tab-content>
           <div class="ma-">
              <h1>ndkj</h1>
              <!-- lookbook continues -->
           </div>
        </div>
     </span>
  </div>

CSS

.nav-bar a {
   font-family: Helvetica, sans-serif;
   font-weight: bold;
   font-size: 1rem;
   text-decoration: none;
}

.black-visible {
   color: black;
}

.white-visible {
   color: var(--grCol3);
}

.tab:hover {
   cursor: pointer;
   opacity: 0.6;
}

.tab.active  {
   opacity: 0.6;
}



.info {
   width: 90vw;
   height: 10vh;
   left: 5vw;
   position: absolute;
   top: 80vh;
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
}

.info a {
   font-family: Helvetica, sans-serif;
   text-transform: uppercase;
   font-weight: bold;
   font-size: 1.2rem;
   color: var(--grCol3);
   text-decoration: none;
   /* border: 1px solid teal; */
}

.text {
   width: 30%;
   display: flex;
   justify-content: space-around;
}

.text > a:first-child {
   text-decoration: underline;
   pointer-events: none;
}

.tab-content {
   position: absolute;
   left: 0;
   top: 0;
   height: 100vh;
   z-index: -11;
   scroll-behavior: smooth;

   
}


.tab-content span {
   overflow: visible;
   display: flex;
   flex: row nowrap;
   justify-content: flex-start;
}


[data-tab-content] {
   /* background-color: violet; */
   font-size: 3rem;
   width: 100vw;
   height: 100vh;
   scroll-behavior: smooth;

}

.video-wrapper {
   width: 100%;
   height: 100%;

}

#catwalk-ma {
   width: 100%    !important;
   height: auto   !important;
}

Answer 1

Assuming you have jQuery in your project, you can do this:

$("a.tab").on("click", (e) => {
    // Remove active class from all tabs
    $("a.tab").removeClass("active");
    // Add active class to your current clicked tab
    $(e.target).addClass("active");
});

You can define the colour you want the active tab to have using.active in your css