引導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() 
    } 

});