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

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追加或附加一个新的class

这也是使用 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>

现在，只要页面不是 refreshed/reloaded，活动的 class 就会附加到按钮上。如果您想删除 class，只需再次单击并查看 class 是否已附加，如果是，请将其删除并重复。

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

How To Maintain The Bottom Border Color Displayed When A Primefaces Commandbutton Is Clicked?

css

primefaces

commandbutton