更改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

您应该更改活动菜单项-active的CSS类。现在"主页"处于活动状态。