What is the best way to maintain the highlighting of a clicked navigation button in CSS?

Question

What is the best way to maintain the highlighting of a clicked navigation button in CSS?

.custom-highlight {
  display: inline;
  font-weight: 500;
  font-size: 15px;
}

.item-list {
  border: 1px solid #b1b8c9;
  color: $color-grey-light;
  font-size: 14px;
  display: inline-block;
  margin-right: 8px;
  padding: 5px 20px;
  border-radius: 4px;
  background-color: #ffffff;
  margin-top: 10px;
  cursor: pointer;
  &:hover {
    background-color: $color-safron;
    color: #ffffff;
  }
}

<ul class="custom-highlight">

  <li v-on:click="highlightItem" @click="selectItem('a')" :class="{ activeListItem }" class="item-list">a</li>

  <li v-on:click="highlightItem" @click="selectItem('b')" :class="{  active: isActiveClass,}" class="item-list">b</li>

  <li v-on:click="highlightItem" @click="selectItem('c')" :class="{  active: isActiveClass, }" class="item-list">c</li>



</ul>

I have 3 buttons, like a,b,c. So On clicking of every button i need to show the blue color highlighted and stay over there.

and when if user press different button, then color highlight need to move.

html css vue.js bootstrap-4

Answer 1

Answer №1

This solution has been updated to utilize Vanilla JavaScript exclusively, with the removal of VueJS syntax for clarity on how the solution works

let elements = document.querySelectorAll('.product-list')

elements.forEach(el => {
  el.addEventListener('click', () => {
    elements.forEach(el => el.classList.remove('active'))
    el.classList.add('active')
  })})

.message-show {
  display: inline;
  font-weight: 500;
  font-size: 15px;
}

.product-list {
  border: 1px solid #b1b8c9;
  color: lightgray;
  font-size: 14px;
  display: inline-block;
  margin-right: 8px;
  padding: 5px 20px;
  border-radius: 4px;
  background-color: #ffffff;
  margin-top: 10px;
  cursor: pointer;
}

.product-list:hover {
  background-color: blue;
  color: #ffffff;
}

.active {
  background-color: blue;
  color: #ffffff;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <script src="script.js" defer></script>
  <title>Document</title>
</head>
<body>
  <ul class="message-show">
    <li class="product-list">5-10</li>
    <li class="product-list">10-22</li>
    <li class="product-list">22-27</li>
  </ul>
</body>
</html>

Answer 2

This solution has been updated to utilize Vanilla JavaScript exclusively, with the removal of VueJS syntax for clarity on how the solution works

let elements = document.querySelectorAll('.product-list')

elements.forEach(el => {
  el.addEventListener('click', () => {
    elements.forEach(el => el.classList.remove('active'))
    el.classList.add('active')
  })})

.message-show {
  display: inline;
  font-weight: 500;
  font-size: 15px;
}

.product-list {
  border: 1px solid #b1b8c9;
  color: lightgray;
  font-size: 14px;
  display: inline-block;
  margin-right: 8px;
  padding: 5px 20px;
  border-radius: 4px;
  background-color: #ffffff;
  margin-top: 10px;
  cursor: pointer;
}

.product-list:hover {
  background-color: blue;
  color: #ffffff;
}

.active {
  background-color: blue;
  color: #ffffff;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <script src="script.js" defer></script>
  <title>Document</title>
</head>
<body>
  <ul class="message-show">
    <li class="product-list">5-10</li>
    <li class="product-list">10-22</li>
    <li class="product-list">22-27</li>
  </ul>
</body>
</html>

Answer 3

Answer №2

<style>
.inactive{
   background-color: #ff9900;
 }
</style>

<script>
function displaySelectedOption(){
  $(":button").removeClass("inactive");
  $(this).addClass("inactive");
 }
</script>

Answer 4

<style>
.inactive{
   background-color: #ff9900;
 }
</style>

<script>
function displaySelectedOption(){
  $(":button").removeClass("inactive");
  $(this).addClass("inactive");
 }
</script>

Answer 5

Answer №3

Since I am a bit confused by the question, I will provide two different CSS solutions:

To keep the button highlighted even when not clicked, use
```
a:focus { background-color: blue; //or other color }
```
If you only want the button to be highlighted while it is being clicked, use
```
a:active { background-color: yellow; }
```
. Hopefully this explanation helps with your HTML coding.

Answer 6

Since I am a bit confused by the question, I will provide two different CSS solutions:

To keep the button highlighted even when not clicked, use
```
a:focus { background-color: blue; //or other color }
```
If you only want the button to be highlighted while it is being clicked, use
```
a:active { background-color: yellow; }
```
. Hopefully this explanation helps with your HTML coding.

Answer 7

Answer №4

Design a class with the necessary blue styling. Next, set up an onClick event listener to addClass('blue-highlight'). If another button is clicked, removeClass('blue-highlight').

for (var i = 0; i < elem.length; i++) {
    elem[i].addEventListener("click", function(e) {
        var current = this;
        for (var i = 0; i < elem.length; i++) {
            if (current != elem[i]) {
                elem[i].classList.remove('blue-highlight');
            } else if (current.classList.contains('blue-highlight') === true) {
                current.classList.remove('blue-highlight');
            } else {
                current.classList.add('blue-highlight')
            }
        }
        e.preventDefault();
    });
};
toggleItem(document.querySelectorAll('product-list'));

Example of how it could look:

https://codepen.io/aish_0509/pen/ExmNmvB

Answer 8

Design a class with the necessary blue styling. Next, set up an onClick event listener to addClass('blue-highlight'). If another button is clicked, removeClass('blue-highlight').

for (var i = 0; i < elem.length; i++) {
    elem[i].addEventListener("click", function(e) {
        var current = this;
        for (var i = 0; i < elem.length; i++) {
            if (current != elem[i]) {
                elem[i].classList.remove('blue-highlight');
            } else if (current.classList.contains('blue-highlight') === true) {
                current.classList.remove('blue-highlight');
            } else {
                current.classList.add('blue-highlight')
            }
        }
        e.preventDefault();
    });
};
toggleItem(document.querySelectorAll('product-list'));

Example of how it could look:

https://codepen.io/aish_0509/pen/ExmNmvB

What is the best way to maintain the highlighting of a clicked navigation button in CSS?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Anchor elements and other inline elements not triggering MouseLeave event

What is the best way to right-align a label in a vertical MUI Slider in ReactJS?

Issue with Vue Checkbox not functioning properly upon being mounted in Edge browser

Use PHP to create a new JSON file on the server by submitting a form, then utilize a second form to update

Tips on preventing a nested loop's inner ng-repeat from updating when the array undergoes changes

It is impossible for me to enclose a container around a bootstrap 4 navbar

Having difficulty retrieving/binding the correct Entity Id in JQuery, consistently retrieves the first item Id from the iteration

How to make a static div adjust its size in the presence of a neighboring div

Choosing the content within a div and inserting it into an email

Is it possible to modify the text displayed within a select element?

Use jQuery to switch back and forth between the login and registration forms on a single

The variation in CSS output between Google Chrome on Windows and Ubuntu

Tips for transferring information obtained from an API to my custom HTML page

Read PDF on Nuxt site

Tips for accessing a local file on a website through HTML - easy steps to follow!

Issue occurs when nested functions prevent the data() variable from updating

Take away the dropdown selection once the form has been submitted

Is there a way to refresh a webpage without the need to reload it

Guide on transporting PNG files over the boundary

Chrome is throwing a syntax error with an unexpected token in jQuery replaceWith