html - 在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;   
}