Bootstrap 3 Aktiver Status verursacht Fehler in der Navigationsleiste

Question

Ich erstelle eine statische Navigationsleiste mit einem aktiven JQuery-Statusrahmen unten, wenn ich eine der Navigationsoptionen auswähle.

Ich glaube jedoch Bootstrap 3 verursacht ein seltsames Problem mit dem aktiven Zustand, denn wenn ich auf einen der Links klicke, wird der Abstand der Navigationslinks kleiner und die li verschieben sich nach oben.

Gibt es eine Möglichkeit zu verhindern, dass der aktive Bootstrap 3-Status meine Navigationslinks verschiebt?

UPDATE ich herausgefunden, dass das Problem der JQUERY aktive Wähler war ich noch es zur Fehlerbehebung bin: https://jsfiddle.net/88z02dx6/

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

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

BONUS: Aus irgendeinem Grund, den ich nicht das Dropdown-Menü bekommen können funktionieren entweder Ich möchte nicht, dass es im Schwebeflug oder im aktiven Zustand hervorhebt, ich möchte nur, dass es eine Dropdown-Liste herunterfährt, wenn ich darauf klicke. Vielen Dank!

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. sehen hier jsfiddle

1. , wenn Sie ein border-a.active fügen Sie sicher, dass für diesen border der Raum ist schon da machen muss, oder Sie werden einige visuelle Probleme haben. so verwenden:

   border-bottom:4px solid transparent; 
   

2. Sie eine Klasse tabs__link auf a haben, bevor Sie klicken. Zu dieser Klasse hast du einen CSS-Stil von display:block. indem Sie alle Klassen entfernen, die a hat, verlieren Sie diesen Stil. also müssen Sie auch display:block zu a hinzufügen.

so am Ende haben Sie diesen Code

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

B.OR eine andere Art und Weise, dies zu tun (hier i auch Lösung für Drop-Down-Menü)

siehe hier jsfiddle

1. auch Klasse zu halten dropdown-toggle auf a, die innerhalb des li.dropdown ist, und auch Halten Sie die tabs__link Klasse, Sie sollten diese verwenden (so müssen Sie nicht display:block auf a wie in der vorherigen Lösung hinzufügen)

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

2. für die .dropdown-menu arbeiten müssen Sie zuerst die overflow:hidden von .primary-nav löschen. dann müssen Sie ein wenig JQ die .dropdown-menuslideToggle(), wenn Sie auf einem so a.dropdown-toggle

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

klicken. Am Ende haben Sie eine JQ wie diese

$('.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() 
    } 

});