Изменение фона выбранного элемента самозагрузки 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