bootstrap 导航增加class效果

bootstrap 导航用js增加active效果，本来想用css的hover等效果展示，最后放弃 

1、a标签访问后，样式虽然改变了，但是一点别的地方，样式又回去了

2、a标签如果都点了的话，都有了访问后的样式，无法回到初始状态

因此选用了js控制导航active

  <nav class="navbar navbar-default">
      <ul class="nav nav-pills">
          <li role="presentation" class="active"><a href="#">1</a></li>
          <li role="presentation"><a href="#">2</a></li>
          <li role="presentation"><a href="#">3</a></li>
       </ul>
  </nav>

js：

 $('.nav-pills').find('a').each(function () {
        $(this).click(function(){
            var a=$('.nav-pills').find('.active');
            a.removeClass('active');
            $(this).parent().addClass('active');
        });
    });

使用了jquery，完美解决！