如何在活動鏈接上添加邊框底部

Question

當我單擊其中一個時，如何在 btn_articles 和 btn_posts 上添加邊框底部？ 我試圖添加/刪除活動的 class 但它沒有用。 任何幫助或想法表示贊賞。

 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>

Answer 1

假設沒有頁面重定向，你可以試試這個。

 $('#profile-buttons a').click(function(e) { e.preventDefault(); $("#profile-buttons a").removeClass('active'); $(this).addClass('active'); });

 .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: red; border-bottom: 3px solid red; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <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>

Answer 2

使用 Psudo Classed（之前和之后）：

 /*Remove Default styles of <a> tag and add padding*/ a { text-decoration: none; padding-bottom: 2px; display: inline-block; /* this element for browser compatibility*/ position: relative; } a:after { content: ""; width: 100%; border-bottom: 1px solid transparent; display: none; position: absolute; bottom: ©; Left: 0; } /*an hover add border-bottom */ a:hover:after { display: block; border-bottom-color: blue; } /*an active means when the click on link it'll appear ) add border-bottom*/ a:active:after { display: block; border-bottom-color: red; }