アクティブクラスとCSSをリンクに追加<a>ボタンの内側bootstrap

Question

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

Heroku app

今私は大丈夫です、私のヘッダーを持っています。一部のボタンは<a>というタグがあり、すべてのタグをカバーしており、すべてがdivやコンテナの中にあります。

検査官は<a>タグを表示します。クリックスペース用のボタンと同じ大きさにしたので、ボタンの代わりにこれらのタグをターゲットにしなければならないと思います。

私は最近、jQueryのスクリプトを完全にヘッダをオーバーホールし、ブートストラップのドキュメントから1を使用しようとしました

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

これは白の背景（アクティブ用私の選択）のスタイルを変更しますが、滞在していませんでした。リダイレクトが起こったらすぐに消えました。

私は以下を使用する必要があります：visitedをクリックし、それを削除してください：visitedはリンクをクリックすると変更されないプロパティです。

Link to header file

Link to CSS file

ここで私は<a>タグに到達するために、すべてのクラスのパスを働くだろうと思います新しく追加されたCSSです。

ヘッダー属性は関連していませんが、何も残したくありません。

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

/* SHOULD THIS WORK? */ 
    .navbar .container .btn-group button.active a{ 
    background-color: white; 
} 

} 

EDITヘッダーHTML - ><a>タグは幅があります：100％;高さ：100％;私はいつもボタンの代わりにそれらをクリックしました。

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

    <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> 

が、私は基本的にしたい、より良い方法を知りませんでした裂け目のウェブサイトのようなもの

Oculus rift

/タッチ/オクルス準備個彼らのフォーマットが異なっている、彼らは太字で表示され、あなたがリフトであるかどうかと、下に線がある。私は私のヘッダーの代わりに白い背景でそれをしたい。

Answer 1

あなたが白の背景にした後、リンクにクリックしたすべての時間をしたい場合、あなたはクッキー

$(function() { 
    // Check cookie 
    if (document.cookie.indexOf("clicked") >= 0) { 
     // Change header 
     $('header').css('background-color', 'white'); 
    } else { 
     // Create trigger 
     $('button').click(function(){ 
      $('header').css('background-color', 'white'); 
      // Create cookie 
      document.cookie = 'clicked=1;'; 
     }); 
    } 
}); 

Answer 2

Iドンを作成する必要が

a:focus { 
    background-color:white; 
} 

EDIT

を探していますなぜ<a>を<button>の中にネストしたのかわかりませんが、私があなたの質問を理解すれば、これはあなたが必要とするものです：

$(function() { 
    $('button').click(function() { 
     var nav = $('.navbar.navbar-fixed-top.navbar-inverse'); 
     $(this).addClass('active'); 
     nav.css('background-color', '#fff'); 
    }); 
});