Question

单击后，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>

Answer 1

如果要切换按钮的活动状态，建议您抓住事件的target并使用适当的Boostrap类。

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">

Answer 2

您可以使用以下CSS

pip install torch==1.4.0+cpu torchvision==0.5.0+cpu -f https://download.pytorch.org/whl/torch_stable.html

单击按钮后将删除样式。检查代码段

.btn:focus {
    outline: none;
    box-shadow: none;
    background: #007bff;
}

Answer 3

代替：

$(e.currentTarget).removeClass("btn-active");

您只需trigger blur event即可消除聚焦效果。

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)">

Answer 4

查看此代码段：

<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>

用户单击按钮时，只需要在blur对象上调用this方法，这将在单击按钮时从按钮上移开焦点。

单击后将Bootstrap按钮重置为正常样式

4 个答案: