单击按钮后如何保持样式

Question

我有4个按钮，每个按钮在按下时都有不同的样式，但是当我在另一侧点击时，我失去了按钮的样式。

.bar-serv {
  padding: 12px 20px;
  display: inline-block;
  width: 90px;
  text-align: center;
}

.bar-opt1:focus {
  border-bottom: #7ebf10 solid 2px;
}

.bar-opt2:focus {
  border-bottom: #1F589A solid 2px;
}

.bar-opt3:focus {
  border-bottom: #73afe7 solid 2px;
}

.bar-opt4:focus {
  border-bottom: #e73827 solid 2px;
}

<div id="chooseServ" class="block">
  <div class="container">
    <p class="p-20" style="display: inline;">options: </p>
    <a onClick="method1" class="bar-serv bar-opt1 p_lr_20">option1</a>
    <a onClick="method1" class="bar-serv bar-opt2 p_lr_20">option2</a>
    <a onClick="method1" class="bar-serv bar-opt3 p_lr_20">option3</a>
    <a onClick="method1" class="bar-serv bar-opt4 p_lr_20">option4</a>
  </div>
</div>

Answer 1

您正在使用当用户点击或点击元素时触发的:focus CSS伪类。这通常用于表单字段

尝试使用:active CSS伪类，当用户按下主鼠标按钮时会触发，而在释放时会结束。

Answer 2

在CSS中试试这个！

var zomato = {
  maxfare: [300, 600, 300, 650, 500, 500, 500, 200, 800],
  cabtype: ['Crazy Cheesy',
    'Sukanta',
    'Crazy Cheesy',
    'SP\'s Biryani House',
    'Aaoji Khhaoji',
    'Durvankur',
    'House of Paratha',
    'Supreme Corner',
    'The Leaf'
  ],
  minfare: ['4.5', '4.0', '4.4', '3.9', '3.9', '3.8', '3.7', '3.8', '3.9']
};

var table = document.createElement("table");

var keys = ["cabtype", "maxfare", "minfare"];
for (var j = 0; j < zomato[keys[0]].length; j++) {
  var tr = table.insertRow();
  for (var k = 0; k < keys.length; k++) {
    var td = tr.insertCell();
    td.innerHTML = zomato[keys[k]][j];
  }
}

document.body.insertBefore(table, null);