How to add border-bottom on active link

How can I add border-bottom on btn_articles and btn_posts when I click one of them? I tried to add/remove the active class but it didn't work. Any help or idea is appreciated.

let btn_articles = document.getElementById('btn_articles');  btn_articles.addEventListener('click', function(){      let articles = document.getElementById('container_articles');      let container_posts = document.getElementById('container_posts');      articles.style.display = "flex";      container_posts.style.display = "none";  })      let btn_posts = document.getElementById('btn_posts');  btn_posts.addEventListener('click',function(){      let container_posts = document.getElementById('container_posts');      let articles = document.getElementById('container_articles');      container_posts.style.display = "flex";      articles.style.display = "none";    })

.btn-profile-buttons:hover{      color:#4dcadd;      border-bottom:3px solid #4dzadd;  }  .btn-profile-buttons{      border-bottom:3px solid #4dzadd;  }  .profile-buttons a{      margin:0rem 2rem;      padding:0.5rem 1rem;      text-decoration: none;      color:#000;      transition: 0.3s ease-in-out;  }  .active{    color:#4dzadd;    border-bottom:3px solid #4dzadd;  }

        <div class="profile-buttons" id = "profile-buttons">              <a id = "btn_articles" href = "#" class = "btn-profile-buttons active">Articles </a>              <a id = "btn_posts" href = "#" class = "btn-profile-buttons ">Posts </a>          </div>

https://stackoverflow.com/questions/66773387/how-to-add-border-bottom-on-active-link March 24, 2021 at 09:07AM