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

comparing multiple values separated by commas with JavaScript

What is the proper way to access the current value of a computed property from within its own computation method?

Tips for implementing the vue-simple-spinner in your project:

Unchanging Dive Field

How can I adjust the appearance of an HTML tag within an Angular component?

Deduct a digit from a variable

Images with fixed positions will be displayed in one div and hidden in all others

CSS code for targeting specific screen sizes in the Bootstrap grid system

Can you help me identify the reason behind a page displaying a temporary horizontal scrollbar?

What is the best method for updating audio from a source in Vue.js?

A miniature triangle-shaped bubble crafted with 1px of CSS3 styling

"Passing the v-model property to a child component in Nuxt.js: A step-by-step

Add the search outcome to the input field in vue

Building a dynamic attribute management system with vue and vuetify

Updating an HTML element by using the input value in a text field with JavaScript/jQuery

Error: The Vuex store is not defined in the Vue.js component when attempting to access it using

Adjust the size of the iframe image to fit seamlessly within the design

Invoke a function in a different component by utilizing the composition API

Tips to prevent browser from freezing while creating a large number of HTML elements

Repositioning with Flexbox: shifting the middle element to a new line