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使用：目标

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

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

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

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

1 个答案: