Bootstrap create active buttons Link in der Kopfzeile

Question

Hey Leute Ich lerne Bootstrap/CSS, während ich eine Website für einen Kurs entwerfe.

Heroku app

Im Moment habe ich meinen Kopf was in Ordnung ist. Es gibt einige Knöpfe, die ein Schild haben, das alle abdeckt, und das ist alles in einigen Divs und Containern.

Ich will es so, dass, wenn ich auf Home oder welche Schaltfläche aktiv ist, kann ich die Farbe grau, zum Beispiel während ich auf diesem Teil der Website bin. Ich habe versucht &: aktiv, aber es funktioniert nicht so.

Tut mir leid, wenn es gefragt wird, bevor ich viel gesucht habe und nicht weiß, wie man es findet. Außerdem wurden Bootstrap-Dokumente überprüft.

Heres mein Code

CSS 

header{ 
text-align: center; 
padding-bottom: 0em; 
} 

.navbar-inverse{ 
background: gray; 
} 



.btn { 
border-style: dotted; 
border-color: gray; 
line-height: 5em; 
width: 8em; 


a{ 
    color: white; 
    font-size: 1.5em; 
    font-weight: bold; 
    display:block; 
    width: 100%; 
    height: 100%; 




    &:active{ 
     background-color: gray; 
    } 


    &:hover{ 
     text-decoration: none; 
     background-color: navy; 
    } 

    } 
} 

.btn-lg{ 
background: black; 
height: 90px; 
padding: 0px 0px 0px 0px; 
} 


HTML HEADER 

<header class="navbar navbar-fixed-top navbar-inverse"> 
<div class="container"> 

<button type="button "class="btn btn-lg"><%= link_to current_user.name, current_user %></button> 

<button type="button" class="btn btn-lg"><%= link_to "Log Out", root_path %></button> 

<button type="button" class="btn btn-lg"><%= link_to "New Event", new_event_path %></button> 

<button type="button" class="btn btn-lg"><%= link_to "All Events", events_path %></button> 


</div> 
</header> 

Answer 1

Versuchen Hinzufügen einen Jquery, die die Schaltfläche eingestellt werden aktiv oder nicht zu sein. Siehe untenstehenden Code als Referenz.

HTML:

<a href='#' class='btn btn-default'> 
Link 1</a> 

<a href='#' class='btn btn-default'> 
Link 2</a> 

JQuery:

$(function() { 
    $('a').click(function() { 
    $(this).addClass('active').siblings().removeClass('active'); 
    }); 
}); 

Answer 2

wie dies tun, gibt class Namen Ihren Knopf, suppose Mann, dann in ur css .man:active geben u will Farbe.

.man:active{ 
background-color: #2222; 
} 

und jetzt, wenn u wollen, dass nach dem u eine Schaltfläche klicken, sollte die Farbe gleich bleiben, die jemals Taste wurde besucht,

.man:visited{ 
background-color: #ffff; 
}