如何根據用戶當前所在的頁面部分更改鏈接的顏色？

Question

我有 4 個部分水平放置在一個容器中，頂部有一個固定的導航欄，它有供用戶訪問頁面不同部分的選項卡。 當它們位於“顯示”選項卡上時，我試圖將文本顏色設為白色，但如果用戶單擊任何其他選項卡，我希望鏈接變為白色。 我想使用 JS 添加/刪除 class 'white-visible' 或 'black-visible' 取決於按鈕點擊但不確定如何以最快的方式實現它。

這是我的代碼-

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

假設你的項目中有 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 中定義希望活動選項卡具有 using.active 的顏色