Question

我有3个用于过滤数据表的命令按钮，我想保持底部边框处于活动状态以指示单击了哪个按钮。

到目前为止，我在CSS中所做的是：

.ui-button.ui-state-hover, .ui-button.ui-state-active {
  border-bottom-color: #ccff00;
  border-bottom-style: solid;
  border-bottom-width: thick;
}

使用上述CSS，当我将鼠标悬停在按钮上时，底部边框的颜色将按预期方式更改；但是当我单击该按钮时，底部边框的颜色不会保持激活状态，并且该按钮会恢复为原始的正常状态。

有人知道如何保持最后一次单击按钮的底部边框的颜色吗？

谢谢。

Answer 1

要实现在单击边框后使边框保持相同颜色的目的，我们需要使用Javascript追加或附加新类

这也使用jQuery来提高速度。

$(".btn").click(function(){
  $(this).addClass("active");
});

body {
  margin:50px;
}

button {
  padding:20px;
  border:4px solid #333;
  background-color: #fff;
  color:#333;
  transition.5s;
}

button:hover {
  border-bottom-color:red;
  transition:.5s;
}

.active {
  border-bottom-color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn">Click Me!</button>
<button class="btn">Click Me!</button>
<button class="btn">Click Me!</button>

现在，只要不刷新/重新加载页面，活动类都将附加到按钮上。如果要删除该类，只需再次单击并检查该类是否已连接，如果是，则将其删除并重复。

单击“ Primefaces”命令按钮时，如何保持显示的底部边框颜色？

1 个答案: