如何在 CSS 中突出显示单击的导航按钮？答案

【问题标题】：How do i keep a clicked navigation button highlighted in css?如何在 CSS 中突出显示单击的导航按钮？
【发布时间】：2021-09-21 15:23:05
【问题描述】：

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

.product-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="message-show">

  <li v-on:click="displayMsg" @click="getPartingCharges('4')" :class="{ activeListItem }" class="product-list">5-10 </li>

  <li v-on:click="displayMessage" @click="getPartingCharges('10-22')" :class="{  active: isActiveClass,}" class="product-list">10-22 </li>

  <li v-on:click="displayMessage" @click="getPartingCharges('22-27')" :class="{  active: isActiveClass, }" class="product-list">22-27</li>



</ul>

我有 3 个按钮，例如 a、b、c。因此，在单击每个按钮时，我需要突出显示蓝色并留在那里。

当用户按下不同的按钮时，颜色高亮需要移动。

【问题讨论】：

使用一个类来添加高亮颜色和javascript来切换它
@КольоПеев 如果你运行代码 sn-p.我可以选择特定的功能，但问题只是在切换每个按钮时突出显示颜色。
能否提供任何代码sn-p..

标签： html css vue.js bootstrap-4

【解决方案1】：

此解决方案仅适用于 Vanilla JavaScript，我删除了 VueJS 语法以便更好地理解解决方案

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>

【讨论】：

【解决方案2】：

<style>
.active{
   background-color: #0095ff;
 }
</style>

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

【讨论】：

【解决方案3】：

我不完全理解这个问题，所以我将创建 2 个 CSS 解决方案：

如果即使您没有按住单击按钮，按钮也必须保持突出显示，请使用 a:focus { background-color: blue; //or others }
相反，如果您希望按钮仅在您按住按钮时突出显示，请使用 a:active { background-color: yellow; } 希望这会有所帮助，祝您的 html 好运。

【讨论】：

如果您不理解问题，请始终使用评论框寻求更清楚，如果作者已经澄清，则继续回答。

【解决方案4】：

使用所需的蓝色样式创建一个类。然后添加一个事件监听 onClick 到 addClass('blue-highlight') 单击其他按钮时 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'));

类似这样的：

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

【讨论】：