在引导导航栏 <li> 上释放鼠标后，如何保持 css :active 样式

Question

我有一个类似于下面代码的 css 语句，当我单击它时，导航栏列表项的底部会显示白色，但是如果我松开鼠标单击，白色边框底部就会消失。当我从一个选项卡单击到另一个选项卡时，我希望在我所在的每个选项卡下都有一个白色的底部。所以它显示了我目前在哪个标签上。这是我的Fiddle

.nav-pills > li > a:active {
    border-bottom: 5px solid white;
}

.menupartial {
  background-color: #16749F;
  opacity: .9;
  width: 100%;
}
.menupartial a {
  color: lightgrey;
  font-weight: bold;
}
.nav-pills > li > a {
  border-radius: 0;
}
.nav-pills > li > a:hover {
  border-radius: 0;
  background-color: #16749F;
  color: white;
}
.nav-pills > li > a:active {
  border-bottom: 5px solid white;
}

<div class="row menupartial">
  <div class="col-md-12">
    <ul class="nav nav-pills">
      <li>@Html.ActionLink("User", "UserProfile", "Account")</li>
      <li>@Html.ActionLink("Profiles", "Index", "Profile")</li>
      <li>@Html.ActionLink("Spaces", "Index", "Space")</li>
      <li><a href="#">Your Schedules</a>
      </li>
      <li><a href="#">Your Messages</a>
      </li>
      <li><a href="#">Your Groups</a>
      </li>
      <li><a href="#">Your Friends</a>
      </li>
    </ul>
  </div>
</div>

Answer 1

您不能在释放鼠标按钮后保留:active，因为它不是这样工作的。

这里有几个选项，一个是 javascript/jquery，另一个是 CSS 和 HTML

jQuery

简洁、简洁、灵活

js

$(document).ready(function() {
  $(".nav-pills a").click(function() {
    $(".nav-pills a").removeClass("active");
    $(this).addClass("active");
  });
});

css

.nav-pills > li > a:active,
.nav-pills > li > a.active {
  border-bottom: 5px solid white;
}

$(document).ready(function() {
  $(".nav-pills a").click(function() {
    $(".nav-pills a").removeClass("active");
    $(this).addClass("active");
  });
});

.menupartial {
  background-color: #16749F;
  opacity: .9;
  width: 100%;
}
.menupartial a {
  color: lightgrey;
  font-weight: bold;
}
.nav-pills > li > a {
  border-radius: 0;
}
.nav-pills > li > a:hover {
  border-radius: 0;
  background-color: #16749F;
  color: white;
}
.nav-pills > li > a:active,
.nav-pills > li > a.active {
  border-bottom: 5px solid white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="row menupartial">
  <div class="col-md-12">
    <ul class="nav nav-pills">
      <li>@Html.ActionLink("User", "UserProfile", "Account")</li>
      <li>@Html.ActionLink("Profiles", "Index", "Profile")</li>
      <li>@Html.ActionLink("Spaces", "Index", "Space")</li>
      <li><a href="#">Your Schedules</a>
      </li>
      <li><a href="#">Your Messages</a>
      </li>
      <li><a href="#">Your Groups</a>
      </li>
      <li><a href="#">Your Friends</a>
      </li>
    </ul>
  </div>
</div>

CSS 使用 :Target

纯 CSS，但依赖于分层 html 布局。

为您的li 提供一个ID，并在a 标记的href 属性中定位它。

.menupartial {
  background-color: #16749F;
  opacity: .9;
  width: 100%;
}
.menupartial a {
  color: lightgrey;
  font-weight: bold;
}
.nav-pills > li > a {
  border-radius: 0;
}
.nav-pills > li > a:hover {
  border-radius: 0;
  background-color: #16749F;
  color: white;
}
.nav-pills > li > a:active,
.nav-pills > li:target > a {
  border-bottom: 5px solid white;
}

<div class="row menupartial">
  <div class="col-md-12">
    <ul class="nav nav-pills">
      <li>@Html.ActionLink("User", "UserProfile", "Account")</li>
      <li>@Html.ActionLink("Profiles", "Index", "Profile")</li>
      <li>@Html.ActionLink("Spaces", "Index", "Space")</li>
      <li id="Schedules"><a href="#Schedules">Your Schedules</a>
      </li>
      <li id="Mesages"><a href="#Mesages">Your Messages</a>
      </li>
      <li id="Groups"><a href="#Groups">Your Groups</a>
      </li>
      <li id="Friends"><a href="#Friends">Your Friends</a>
      </li>
    </ul>
  </div>
</div>