ブートストラップでヘッダーのアクティブなボタンを作成する

Question

ちょっと私はコースのウェブサイトをデザインしているうちにブートストラップ/ CSSを学んでいます。

Heroku app

今私は大丈夫です、私のヘッダーを持っています。いくつかのボタンがあります。これらのボタンには、それらのすべてをカバーするタグがあり、それはすべてdivやコンテナの中にあります。

ホームをクリックするか、アクティブなボタンをクリックすると、サイトのその部分にいる間に、たとえば色が変わります。私は&：試みましたが、それは動作しません。

申し訳ありません私は多くを検索し、それを見つける方法を知らないうちに尋ねられています。また、ブートストラップのドキュメントをチェックしました。

相続人の私のコード

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

はアクティブまたはないようにボタンを設定しますjqueryのを追加してみてください。参照のために以下のコードを参照してください。

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

は、次のように行い、ボタン、と仮定する人にclass名前を付け、その後、ウルCSSで.man:activeは、uは希望の色与えます。

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

およびuはuはボタンをクリックした後、色は、同じままでなければならないことをしたい場合は、今、これまでのボタンが訪問された 、

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