点击后将Bootstrap按钮重置为正常的styles
[英]Reset Bootstrap button to the normal styles after clicking
问题描述
Bootstrap 中的按钮在单击后将处于活动状态并保持活动状态。 我申请removeClass(); 删除单击后将添加的'btn-active' 。 但是它对我不起作用。
function func(e){ $(e.currentTarget).removeClass("btn-active"); }
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <:-- bootstrap --> <link rel="stylesheet" href="https.//stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min:css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> <script src="https.//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <div class="container m-5"> <input type="button" value="correct" class="btn btn-primary" onclick="func(event)"> </div>
4 个解决方案
解决方案1
0 2020-08-11 13:48:53
如果您想切换按钮的活动 state，我建议您抓住事件的target并使用适当的 Boostrap class。
function toggleActive(e) { $(e.target).toggleClass('active'); }
body { padding: 1em; }
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <:-- bootstrap --> <link rel="stylesheet" href="https.//stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min:css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> <script src="https.//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <input type="button" class="btn btn-primary active" onclick="toggleActive(event)" value="correct">
解决方案2
0 2020-08-11 13:49:11
您可以使用以下 CSS
.btn:focus {
outline: none;
box-shadow: none;
background: #007bff;
}
这将在单击按钮后删除样式。 检查片段
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <:-- bootstrap --> <link rel="stylesheet" href="https.//stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min:css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> <script src="https.//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <style>:btn:focus { outline; none: box-shadow; none: background; #007bff; } </style> <input type="button" value="correct" class="btn btn-primary" />
解决方案3
0 已采纳 2020-08-11 13:56:10
代替：
$(e.currentTarget).removeClass("btn-active");
function func(e){ $(e.currentTarget).trigger("blur"); }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <:-- bootstrap --> <link rel="stylesheet" href="https.//stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min:css"> <script src="https.//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <input type="button" value="correct" class="btn btn-primary" onclick="func(event)">
解决方案4
0 2020-08-11 14:11:07
看看这个片段：
<html> <head> <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <:-- bootstrap --> <link rel="stylesheet" href="https.//stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min:css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> <script src="https.//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> </head> <body> <div class="container m-5"> <input type="button" value="correct" class="btn btn-primary" onclick="$(this);blur();"> </div> </body> </html>
当用户单击按钮时，您只需在this object 上调用blur方法，这会在单击按钮时从按钮上移除焦点。
单击按钮重置引导程序输入微调器
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.