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

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

我将4个部分水平放置在一个容器中，并在顶部固定了一个导航栏，该导航栏上有标签供用户访问页面的不同部分。我试图在“显示”选项卡上将文本的颜色设为白色，但是如果用户单击任何其他选项卡，我希望链接变为白色。我曾想过使用JS来添加/删除类“白色可见”或“黑色可见”类，具体取决于单击按钮的方式，但是不确定如何最快地实现这一点。

这是我的代码-

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;
}

解决方法

假设您的项目中包含jQuery，则可以执行以下操作：

$("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");
});

您可以在CSS中使用.active定义希望活动标签具有的颜色