nav Links zu Tasten ändern, um gleich aussehen wie öffnen und laden ein externes div

Question

Ich habe Navbar, die so ziemlich aussieht und funktioniert, wie ich es will, aber ich möchte, dass die Links zu ändern und/oder laden neue divs erscheinen auf der Seite oder möglicherweise Modale. Ich denke, der Wechsel zu den Buttons wird der einfachste Weg sein. Aber im Idealfall möchte ich die Schaltflächen so aussehen wie die Links zusammen mit der Mouseover-Farbe.

Mein navbar-Code ist

<nav class = 'navbar navbar-default'> 
<div class='container'> 
    <div class = 'navbar-header'> 
<button type = 'button' class = 'navbar-toggle collapsed' data-toggle = 'collapse' data-target = '#example-navbar-collapse'> 
<span class = 'sr-only'>Toggle navigation</span> 
<span class='icon-bar top-bar'></span> 
<span class='icon-bar middle-bar'></span> 
<span class='icon-bar bottom-bar'></span></button> 
<a class = 'navbar-brand wow zoomIn' href = '#'><img class='img-responsive2'  
      src='http://www.cheekytransport.co.uk/images/new.png' alt='logo' height='52'></a></div> 
<div class = 'collapse navbar-collapse' id = 'example-navbar-collapse'> 
    <ul class='nav navbar-nav navbar-nav'> 
     <li class='non-active'><a href='#'>About</a></li> 
    </ul> 
    <ul class='nav navbar-nav navbar-nav'> 
     <li class='non-active'><a href='#'>Get bids</a></li> 
    </ul> 
    <ul class='nav navbar-nav navbar-nav'> 
     <li class='non-active'><a href='#'>Register company</a></li> 
    </ul> 
    <ul class='nav navbar-nav navbar-nav'> 
     <li class='non-active'><a href='#'>Help</a></li> 
    </ul> 
    <ul class='nav navbar-nav navbar-nav'> 
     <li class='non-active'><a href='#'>Contact</a></li> 
    </ul> 
    <ul class='nav navbar-nav navbar-right'> 
     <li><a href='#'><span class='glyphicon glyphicon-user'></span> Login</a></li> 
    </ul> 
</div> 
</div> 
</nav> 

Die navbar css:

.navbar-default { 
    padding-left:10px; 
    padding-right:10px; 
    border: 0; 
    -webkit-border-radius: 0; 
    -moz-border-radius: 0; 
    border-radius: 0; 
    background-color: #00a3fe; 
    font-size: 14pt;font-weight: 400;} 


.navbar-brand { 
    padding-top: 0; 
    padding-bottom: 0; 
} 
.nav.navbar-nav.navbar-right li a { 
    color: #ffffff; 
} 

.nav.navbar-nav.navbar-nav li a { 
    color: #ffffff; 
} 

.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { 
    background-color: #49bdfe; 
    color: #FFFFFF; 
} 

.navbar-toggle, .icon-bar { 
    border:1px solid white; 
    background-color:white; 
} 

Answer 1

Sie meinen, das Ersetzen der '' Tags mit '' Tag? Wenn Sie so tut, kopieren Sie einfach die CSS .. Sie es auf diese Weise easly tun können:

.nav.navbar-nav.navbar-right li a, 
.nav.navbar-nav.navbar-right li button { 

Eine Sache zu erinnern: Tasten haben ein wenig unterschiedlichen CSS-Attribute wie ‚Umriss‘. Vergessen Sie nicht, sich auf diese Attribute auf Ihrem CSS zu beziehen.