點擊后將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.