在html中更改制作的样式

Question

我正在尝试为用户创建导航菜单：

HTML：

<ul class="nav nav-pills">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Profile</a></li>
  <li><a href="#">Messages</a></li>
</ul>

CSS：

.nav-pills > li {
  float: left;
}
.nav-pills > li > a {
  border-radius: 4px;
}
.nav-pills > li + li {
  margin-left: 2px;
}
.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
  color: #fff;
  background-color: #428bca;
}

http://jsfiddle.net/KJFj5/

当我点击每个导航标签时，它不会用蓝色绘制它。我的问题是，是否有办法修改它，所以它会。谢谢！

Answer 1

不完全确定你在这里想要达到的目标。要在点击它们时更改导航选项卡上的样式，我会像你这样写css：

.nav-pills > li {
    float: left;
}

.nav-pills > li > a {
    border-radius: 4px;
}

.nav-pills > li {
    margin-left: 2px;
    list-style:none;
}

.nav-pills > li > a:active { /*Use the :active pseudo selector*/
    color: #fff;
    background-color: #428bca;   
}

Answer 2

您应该更改活动菜单项的CSS类 - active。现在“Home”活跃了。