Tips for maintaining the active state of a link when loading a new page

Question

Tips for maintaining the active state of a link when loading a new page

Currently, I am working on a website project that utilizes Bootstrap framework. One section of the website consists of three buttons, each linking to a different page within the site.

<div class="container-fluid filter-tag py-3">

    <ul class="tag-menu">
        <li><a href="<?php echo esc_attr( add_query_arg( 'tag', 'biella' ) ); ?>" class="btn"> Biella </a></li>
        <li><a href="<?php echo esc_attr( add_query_arg( 'tag', 'vercelli' ) ); ?>" class="btn"> Vercelli </a></li>
        <li><a href="<?php echo esc_attr( add_query_arg( 'tag', 'valsesia' ) ); ?>" class="btn"> Valsesia </a></li>
    </ul>
    

</div>

To indicate the active state, I have applied CSS styling which changes the background-color and text color when a button is clicked. This provides visual feedback for users as they navigate through the website.

.tag-menu li a{
    border:1px solid $primary;
    border-radius:12px;
    padding:5px;
    margin-right:7px;
    color:#000000;
}
.tag-menu li a:active{
    border:1px solid $primary;
    background-color:$primary;
    border-radius:12px;
    padding:5px;
    margin-right:7px;
    color:#ffffff;
    box-shadow:none;
}

Upon testing, I noticed that the active class only appears briefly when a button is clicked before reverting back upon page load. Despite attempting various solutions found on similar issues on Stack Overflow, I have not been successful in resolving this issue with JQuery or JavaScript.

If anyone could offer guidance on how to address this problem effectively, it would be greatly appreciated. Thank you.

javascript html jquery css

Answer 1

Answer №1

:active is not a class, but a selector that detects the clicking moment (between the click and the release), so your CSS is applied only for that instant. Here's a brief example:

a:active{
  color:red;
  }

<a>link example</a>

To achieve the desired effect, you can use an event listener to add a class when the link is clicked:

var links = document.querySelectorAll(".link");
for(link of links){
  link.addEventListener("click", function(e){
    for(inlink of links){
      inlink.classList.remove("active");
    }
    e.target.classList.add("active");
  });
}

.active {
  color:red;
}

<a class="link">link 1</a><br>
<a class="link">link 2</a>

Answer 2

:active is not a class, but a selector that detects the clicking moment (between the click and the release), so your CSS is applied only for that instant. Here's a brief example:

a:active{
  color:red;
  }

<a>link example</a>

To achieve the desired effect, you can use an event listener to add a class when the link is clicked:

var links = document.querySelectorAll(".link");
for(link of links){
  link.addEventListener("click", function(e){
    for(inlink of links){
      inlink.classList.remove("active");
    }
    e.target.classList.add("active");
  });
}

.active {
  color:red;
}

<a class="link">link 1</a><br>
<a class="link">link 2</a>

Tips for maintaining the active state of a link when loading a new page

Answer №1

Similar questions

"Uploading Images Using AJAX: A Step-by-Step Guide

Ensure to incorporate tab codes within the JSX file for proper rendering

The code appears disorganized; inquiring about alternative methods

Embed HTML code to a website using a PHP script on a separate webpage

Vue.js: V-Model input fails to update with JS virtual keyboard

Mastering the art of selecting checkboxes and Font Awesome icons with JQuery

Prevent the propagation of a particular CSS class's inheritance

Create an HTML button on the homepage that directs users to the "about" page

Can you provide a succinct explanation of what constitutes a well-defined "landing page"?

When dynamically binding onclick events within a for loop, all buttons end up with the same value

What is the method to display only icons without text when the sidebar is minimized?

Having difficulty finding the element in Selenium WebDriver while using C#

Ensuring Radio Button Selection is Valid

Run a directory using the Node.js command line interface

Indicate the end of the row in JavaScript when using the match() function

Adjust the tabs to fit perfectly within the container

Refreshing Datatable without having to refresh the entire webpage

Display only the background image or color behind a stationary element

Angular ngRoute causing issues when loading a chart

VueJS: A Closer Look at Parent-Child Communication