javascript - 当有人点击网站上的任何地方时，事件和焦点类将被删除

Question

我正在使用 Bootstrap 选项卡，我有三个选项卡，当单击每个选项卡时，事件和焦点类将添加到其中，以便用户可以知道他们在哪个选项卡上。

现在我添加了 active 和 focus 类来处理这个问题，但是当有人点击网站上的任何地方时，active 和 focus 类将被删除。我曾尝试在这里寻找答案，并从字面上尝试了帖子中的所有内容，但我没有任何运气。

我会上传图片和代码。

  .nav>li>a:focus,
.nav>li>a:hover {
  color: #4272d7 !important;

<ul class="nav nav-tabs">
  <li class="" aria-expanded="false"><a class="bg-account active" data-toggle="tab" href="#menu1" aria-expanded="true">My Account</a></li>
  <li><a class="bg-invite" data-toggle="tab" href="#menu2" aria-expanded="false">Referral</a></li>
  <li><a class="bg-lottery" data-toggle="tab" href="#menu3" aria-expanded="false">Lottery Results</a></li>
</ul>

图片 1: 当处于事件状态且焦点处于打开状态时(这就是我希望标签处于事件状态时始终如此)

图片 2:这是我点击网站上的其他任何地方时的情况，即使我在同一个选项卡上处于事件状态并且焦点类正在被删除。

谁能帮帮我？我最近两天正在处理这个问题，但我没有任何运气。

Answer 1

:focus表示“用户正在与之交互的元素”。

如果他们点击 <input>那么他们就不会与 <a> 互动没有了。

使用 :focus 实现选项卡是一种效果不佳的技巧。解决您的问题的方法是不要那样做。请改用 JavaScript。