Css 保持btn：焦点样式

我正在努力保持btn:focus样式在点击后消失。我怎么做

<a href="javascript:;" id="item1" class="hello btn btn-default"> item1 </a>
<a href="javascript:;" id="item2" class="hello btn btn-default"> item2 </a>
<a href="javascript:;" id="item3" class="hello btn btn-default"> item3 </a>

.btn:hover,  
.btn:focus {
   background: #00f;
   border-color: #00f; }

.btn:悬停，
.btn:焦点{
背景：#00f；
边框颜色：#00f；}

像这样使用Jquery：

$(document).ready(function(){
    $(".btn").click(function(){
        $(".btn").addClass("custom-focus");
    });
});

CSS:

---

使用Javascript

onclick=“addFocus（this）

将类添加到选择器中，所需样式如下：

函数addFocus（elem）{
elem.className+=“焦点”；
}

.btn:悬停，
.焦点{
背景：#00f；
边框颜色：#00f；
}

单击时，您需要使用javascript添加一个类，因此没有简单的方法可以使用css保持样式。谢谢。这就是您的意思吗？

.custom-focus {
   background: #00f;
   border-color: #00f;
}