如何保持按钮的边框显示，然后单击其他区域后它消失

就像对文档的影响一样，但它是一个a标签，必须使用href属性。我有两个问题 1.对于伪类A标签作为按钮，如何防止它跳转到#块。 2.如果我使用按钮类，第一次点击后，如何保持对焦状态，然后在第二次点击后，它会恢复原始状态......

.btn,.btn-primary{
width: 110px;
font-size: 0.9em;
color: black !important;
background-color: white !important;
}
.btn,.btn-primary:active,.btn,.btn-primary:focus{
font-weight: bold;
background-color:white;
color:black;
border-color:#4477b1 !important;
border-width: 2px !important;
}

这是我的 HTML：

<button type="button" class="btn btn-primary ml-4 active" data-toggle="button" aria-pressed="true" (click)=display()>{{buttonContent}}</button>

此图片显示首次单击后首次单击后

我从你的问题中的理解是，你不希望一直勾勒出按钮(因为你只是通过添加一个边框来做到这一点(......但是您希望它在初始单击后像这样概述，并且如果您在按钮本身以外的其他地方单击，则不会将其关闭。如果我误解了，请告诉我，我会根据需要进行编辑。

演示：https://jsfiddle.net/ebtk1oqg/

法典：

<!doctype html>
<html lang="en">
<head>
<title>Title</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
.btn,.btn-primary{
width: 110px;
font-size: 0.9em;
color: black !important;
background-color: white !important;
}
.btn-primary:focus {
box-shadow: none;
}

#btn-primary.focus {
box-shadow: none;
}

.is-active {
box-shadow: 0 0 0 .2rem rgba(38,143,255,.5) !important;
}

</style>
</head>
<body>
<button id="yourButton" type="button" class="btn btn-primary ml-4 active" data-toggle="button" aria-pressed="true" (click)=display()>buttonContent</button>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script>
$('#yourButton').click(function(){
$(this).removeClass("focus active");
$(this).toggleClass("is-active active");
});
</script>
</body>
</html>

相关内容

最新更新

热门标签：