当有人在网站上的任何地方单击时，活动和焦点课程将被删除

Question

我正在使用Bootstrap选项卡，并且我有三个选项卡，当单击每个选项卡时，将向其中添加活动和焦点类，以便用户可以知道它们位于哪个选项卡上。

现在，我添加了活动和重点课程来解决该问题，但是当有人在网站上单击任意位置时，活动和重点课程将被删除。我试图在这里寻找答案，从字面上尝试了帖子中的所有内容，但我没有任何运气。

我将上传图片和代码。

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