更改所选项目bootstrap的背景2.3

Question

我正在使用bootstrap 2.3堆叠标签http://jsfiddle.net/28Hv5/

<ul class="nav nav-tabs nav-stacked">
   <li><%= link_to 'first', '#' %></li>
   <li><%= link_to 'second', '#' %></li>
   <li><%= link_to "third", '#' %></li>    
</ul>

如何为所选项目制作以下标记？

Answer 1

借助css的伪类，这很容易。

ul.nav li.active a, ul.nav li.active a:hover {
    background: blue;
    position: relative;
    border-top-left-radius: 0 !important; /* remove the default bootstrap's border-radius*/
    color: #fff;
}

ul.nav li.active a:before {
    width: 0;
    height: 0;
    border-top: 18px solid transparent;
    border-bottom: 18px solid transparent;
    border-right:10px solid blue;
    position: absolute;
    left: -10px;
    content:"";
    top: 0;
}

Example