引导3活跃状态，使得在导航栏

Question

我创建一个JQuery的活动状态边框底部的静态导航栏时，我选择的导航选项之一错误。

不过，我认为引导3导致一个奇怪的问题与激活状态，因为每当我点击导航链接的间距变小的环节和李转移到顶部的一个。

有没有一种方法，以防止转向我的导航链接引导3激活状态？

UPDATE我想通了，这个问题是jQuery的主动选择，我还是故障排除它：https://jsfiddle.net/88z02dx6/

$('.vnavbar ul li a').click(function() { 
    $('active').removeClass(); 

    $(this).addClass('active a'); 
}); 

奖金：出于某种原因，我不能让下拉菜单无论是工作，我不希望它突出悬停或活动状态，我只是希望它打倒一个下拉列表，当我点击它。谢谢！

https://jsfiddle.net/DTcHh/23151/

CSS：

/* Latest compiled and minified CSS included as External Resource*/ 

/* Optional theme */ 
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css'); 

.bodyh {height:100%; background-color:blue;} 

.tabs { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
    display: table; /* [1] */ 
    table-layout: fixed; /* [2] */ 
    width: 100%; /* [3] */ 
} 

    .tabs__item { 
     display: table-cell; /* [4] */ 
    } 

     .tabs__link { 
      display: block; /* [5] */ 
     } 


/** 
* Primary nav. Extends `.tabs`. 
* 
* 1. Stop tabs’ corners leaking out beyond our 4px round. 
*/ 
.primary-nav { 
    text-align: center; height:48px; position: relative; 
    overflow: hidden; background:#333 !important; border-radius: 0 !important; /* [1] */ 
} 

     .primary-nav a { 
      padding: 1em; 
      color: #fff; 
      font-weight: bold; 
      text-decoration: none; 
     } 

     .primary-nav a:hover { 
      background-color: #666; 
     } 

.primary-nav a.active { 
    border-bottom: 4px solid #f90; color: #f90; padding:1em; 
} 

HTML

<li class="tabs__item"> 
     <a href="#" class="tabs__link">Content</a> 
    </li> 

    <li class="tabs__item"> 
     <a href="#" class="tabs__link">Search</a> 
    </li> 
    <li class="tabs__item"> 
     <a href="#" class="tabs__link">Profile</a> 
    </li> 
    <li class="tabs__item"> 
     <a href="#" class="tabs__link">Voozlr</a> 
    </li> 
    <li class="tabs__item"> 
     <a href="#" class="tabs__link">Store</a> 
    </li> 

     <li class="tabs__item"> 
     <a href="#" class="tabs__link">Mail</a> 
    </li> 



       <li class="dropdown tabs__item"> 


      <a href="#" class="dropdown-toggle tabs__link" dropdown-toggle="" data-toggle="dropdown">Me <b class="caret"></b> 
      </a> 

      <ul class="dropdown-menu" role="menu"> 
       <li> 
       <a href="#">Action</a> 
       </li> 
       <li> 
       <a href="#">Another action</a> 
       </li> 
       <li> 
       <a href="#">Something else here</a> 
       </li> 
       <li> 
       <a href="#">Separated link</a> 
       </li> 
      </ul> 
      </li> 

</ul> 

      </nav>    
     <!-- /.navbar-collapse -->  
    </header> 
    <div class="bodyh"></div> 

Answer 1

A.这里jsfiddle

1. 看到，如果你添加一个border到a.active您必须确保为border的空间已经存在，否则你将有一些视觉上的问题。所以使用：

   border-bottom:4px solid transparent; 
   

2. 你有一个类tabs__link上a点击之前。到那个类你有一个css风格display:block。通过去除a拥有的所有类，你失去了这种风格。所以你需要添加display:block到a也。

所以最后你有这样的代码

.primary-nav a { 
     padding: 1em; 
     color: #fff; 
     font-weight: bold; 
     text-decoration: none; 
     display:block; 
     border-bottom:4px solid transparent; 
    } 

B.OR另一种方式来做到这一点（在这里我还包括下拉菜单解决方案）

看到这里jsfiddle

1. 也不断a这是li.dropdown内dropdown-toggle类，并且还保持tabs__link类，你应该使用这个（所以你不需要像在以前的解决方案a加display:block）

   $('li:not(.dropdown) a').attr('class', 'tabs__link'); 
   $('li.dropdown a').attr('class', 'dropdown-toggle tabs__link'); 
   

2. 对于.dropdown-menu工作，你首先需要从.primary-nav删除overflow:hidden。那么你需要一点点JQ到slideToggle()的.dropdown-menu，当你点击一个a.dropdown-toggle

   if($(this).hasClass('dropdown-toggle')){ 
       $(this).siblings(".dropdown-menu").slideToggle() 
   }else{ 
       $(".dropdown-menu").slideUp() 
   } 
   

左右。最后你有这样的JQ

$('.vnavbar ul li a').click(function() { 
    $('li:not(.dropdown) a').attr('class', 'tabs__link'); 
    $('li.dropdown a').attr('class', 'dropdown-toggle tabs__link'); 

    $(this).addClass('active'); 

    if($(this).hasClass('dropdown-toggle')){ 
     $(this).siblings(".dropdown-menu").slideToggle() 
    }else{ 
    $(".dropdown-menu").slideUp() 
    } 

});