Home / Questions / 103204
Accepted
Hoose
Asked: 2020-09-19 13:16:16 +0800 CST 2020-09-19 13:16:16 +0800 CST

'禁用' HTML 中的元素

  • 772

<a>单击它后，我需要“停用”一个元素。我正在使用 Bootstrap，当我单击一个元素<a>时，会打开一个模式，当我关闭它时，该元素会<a>继续，就像它被“选中”一样。我怎样才能删除它？

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <a href="#" data-toggle="modal" data-target="#myModal">Esto es un ejemplo</a>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Example</h4>
      </div>
      <div class="modal-body">
        <p>Example</p>
      </div>
    </div>
  </div>
</div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </body>
</html>

jquery

2 Answers

  1. Best Answer

    出于可访问性的原因，模式关闭后，它focus应该返回到启动它的元素。因此，您无法focus在使用后从链接中删除它。参考：SO 上的答案，GitHub 上的问题

    但是，如果您不希望它在视觉上显示为选中状态，则可以为a:focusand添加 css 规则a:hover：

        a:focus {
      color: #337ab7 !important;
      outline: none !important;
      text-decoration: none !important;
    }

    a:hover {
      color: #23527c !important;
      text-decoration: underline !important;
    }

    您的完整代码如下所示：

    <!DOCTYPE html>
<html lang="en">
  <head>
    <style type="text/css">
      a:focus {
        color: #337ab7 !important;
        outline: none !important;
        text-decoration: none !important;
      }
      a:hover {
        text-decoration: underline !important;
        color: #23527c !important;
      }
    </style>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <a href="#" data-toggle="modal" data-target="#myModal">Esto es un ejemplo</a>
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">Example</h4>
          </div>
          <div class="modal-body">
            <p>Example</p>
          </div>
        </div>
      </div>
    </div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </body>
</html>

    • 0

  2. 要真正从您身上移除焦点，您应该在关闭模式时对其a使用blur()a，因此首先您应该具有以下内容：

    $('#myModal').on('hidden.bs.modal', function () {
    $('a').blur();
});
    • 0