Step-by-step guide on implementing a border-bottom for an active link

Is there a way to apply a border-bottom to btn_articles and btn_posts when one of them is clicked? I attempted to use the active class but it did not have the desired effect. Any suggestions or solutions would be greatly 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>

javascriptcss

Answer №1

In the scenario where there is no page redirection, you can experiment with this solution.

$('#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

Utilizing Psudo Classes (Before and After):

/*Modifying Default styles of <a> tag and adjusting padding*/

a {
    text-decoration: none;
    padding-bottom: 2px;
    display: inline-block; /* utilized for browser compatibility*/
    position: relative;
}

a:after {
    content: "";
    width: 100%;
    border-bottom: 1px solid transparent;
    display: none;
    position: absolute;
    bottom: ©;
    Left: 0;
}


/*on hover, add border-bottom */
  a:hover:after {
      display: block;
      border-bottom-color: blue;
  }
/*on active state (clicking on link) add border-bottom*/

  a:active:after {
      display: block;
      border-bottom-color: red;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error: The data from the intermediate value cannot be parsed using the parseFromString() method and replaced with another value,

I'm working on a project where I need to display parsed HTML content within an element. However, before displaying it, I need to make some changes to the HTML using the `replace` method. But unfortunately, I encountered a TypeError: (intermediate valu ...

javascriptdomtypeerror

The flex box structure crumbles, causing the boxes to align side by side instead of in a masonry layout

I'm currently facing a challenge with my project regarding the utilization of flexbox. Everything seems to be in order, but as you resize your viewport to around 1400px, the column layout collapses. I'm looking for a way to prevent this from hap ...

htmlcssflexbox

Setting up a recurring task with a while loop in a cron job

Discover numerous libraries dedicated to implementing cron jobs in NodeJS and Javascript, allowing for hosting on a server. Ultimately, cron jobs are simply repetitive tasks set to run at specific times/dates. This led me to ponder the distinction betwee ...

javascriptnode.jscron

Retrieve the date for the chosen time slot by utilizing the fullCalendar feature

I've been experiencing issues with a piece of code that is supposed to retrieve the date corresponding to a user-selected slot. Here's what I've tried so far: $('.fc-agenda-axis.fc-widget-header').on('mousedown', functio ...

javascriptjqueryfullcalendar

Having difficulty sending variables to onreadystatechange

Here is the latest version of the source code: var xhttp = new XMLHttpRequest(); function passVars(var1, var2, var3) { if (var1.readyState == 4) { if (var1.status == 200) { var data = var1.responseText; if (data) { playSuccess ...

javascriptajaxonreadystatechange

AJAX parsing through JSON files generated by PHP

Need help with sending a json to an ajax call and reading it when it's sent. Plus, the json structure seems off due to the backslashes... This is the ajax function in question: function find(){ var type = $('#object_type').val( ...

javascriptphpajaxjson

Using JavaScript, include a child class into a parent class

I am facing an issue with my class hierarchy, which includes classes like Parent, Child1 (which extends Parent), and Child2. Parent contains an array of child items, but importing Child1 and Child2 into Parent leads to circular dependencies and errors whe ...

javascript

Instructions on how to implement a readmore button for texts that exceed a specific character length

I am attempting to display a "Read more" button if the length of a comment exceeds 80 characters. This is how I am checking it: <tr repeat.for="m of comments"> <td if.bind="showLess">${m.comment.length < 80 ? m.comment : ...

javascripttypescriptaurelia

Testing an Angular factory that relies on dependencies using JasmineJS

I have a factory setup like this: angular.module("myServices") .factory("$service1", ["$rootScope", "$service2", function($rootScope, $service2){...})]; Now I'm attempting to test it, but simply injecting $service1 is resulting in an &ap ...

javascriptangularjsunit-testingtestingjasmine

Node.js may not always save Winston log files when using process.exit()

I'm struggling to grasp a particular concept... when I use process.exit() in a program that logs events to both the console and a file, all the log events are displayed on the console as expected, but only the first one (or none at all) is actually sa ...

javascriptnode.jsasynchronousprocesswinston

Building a sleek grid similar to Pinterest in Bootstrap v4.0 without relying on jQuery (using a black color scheme with equal width and varying height)

Is it feasible to craft a grid similar to Pinterest using Bootstrap 4? I am aware of the jQuery plugins that can be used, but is there a way to achieve this purely with CSS? Note: This is not a duplicate question. Please try to comprehend my query first ...

htmlcsstwitter-bootstrapgridbootstrap-4

Steps for serving a "noop" document via HTTP

I am in the process of creating a CGI script that performs various functions. I am striving to maintain simplicity and portability within the script. My main objective is to provide users with a way to send a message to the server without losing the curren ...

javascriptcgi

What is the best way to initiate an onload event from a script embedded within a jquery plugin?

Currently, I am in the process of developing a jQuery plugin. One issue that I have encountered involves a script tag being dynamically added for LivePerson.com. The script is supposed to trigger an onLoad function specified in the configuration. However, ...

javascriptjquerypluginsonload

What is the best way to create a @mixin incorporating variables to easily reference breakpoints using custom aliases?

Currently in the process of constructing a website using SASS coding, I have created several @mixins for Media Queries that will be utilized later with the @include directive. The structure of these mixins is as follows: _standards.sass // Media queries @ ...

csssass

"Implementing a dynamic loading effect in Highcharts triggered by a button

Take a look at this sample highchart fiddle: http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/members/series-setdata/ $('#button').click(function () { var chart = $('#containe ...

javascriptjquerycsshighcharts

Pass the identical event to multiple functions in Angular 2

On my homepage, there is a search form with an input box and select dropdown for users to search for other users by location or using html5 geolocation. When a user visits the page for the first time, they are prompted to allow the app to access their loca ...

javascripthtmlangularangular2-formsangular4-forms

Tips for modifying the icon of a div with a click event using vanilla JavaScript

My goal is to create a functionality where clicking on a title will reveal content and change the icon next to the title. The concept is to have a plus sign initially, and upon clicking, the content becomes visible and the icon changes to a minus sign. C ...

javascripthtmlcsssass

Ways to center items in a row-oriented collection

When dealing with a horizontal list, the issue arises when the first element is larger than the others. This can lead to a layout that looks like this. Is there a way to vertically align the other elements without changing their size? I am aware of manual ...

htmlcss

Font discrepancies in HTML field types "text" and "textarea" are causing inconsistent font display

Why do the text in my "text" and "textarea" fields show different fonts on my pages' HTML? I attempted to specify the font type in both the background CSS file and within the HTML, but it did not resolve the issue. Just to be transparent...I'm ...

htmlcsstexttextarea

JQuery button.click() handler executes without a user click

Currently, I am in the process of tidying up the code for my auction game. However, I have encountered an issue where my function is triggered immediately after endAuction() is called rather than waiting for the button click event. Unfortunately, I am no ...

javascriptjqueryclick