將活動類和CSS添加到<a>按鈕引導程序內的</a>鏈接

Question

嘿伙計們，當我為一門課程設計一個網站時，我正在學習bootstrap / CSS。

Heroku app

現在我有我的標題，這很好。 有一些按鈕，有一個<a>標簽，涵蓋了所有這些按鈕，這些都在一些div和容器中。

檢查員顯示<a>標簽。 我把它們設為與點擊空間按鈕一樣大，所以我想我必須定位這些標簽而不是按鈕。

我最近試圖徹底檢查標頭並使用Bootstrap文檔中的標頭並執行jQuery腳本

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

這改變了白色背景的風格（我選擇活動），但它沒有停留。 一旦重定向發生，它就消失了。

我應該使用：訪問，然后刪除它我認為：訪問是一個屬性，當我點擊鏈接時不會改變。

鏈接到頭文件

鏈接到CSS文件

這是我認為可以使用的新添加的CSS，所有類到達<a>標簽的路徑。

標題屬性不相關，但不希望遺漏任何內容。

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

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

}

編輯標題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>

我基本上想要像Rift網站這樣的東西

Oculus裂痕

無論您是在Rift / Touch / Oculus Ready Pcs中，它們的格式都不同，它們都是粗體，下面有一條線。 我想要我的標題但是用白色背景代替。

Answer 1

你在尋找嗎？

a:focus {
    background-color:white;
}

編輯

如果您在點擊鏈接后一直想要白色背景，則需要創建一個cookie

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

我不知道為什么你在<button>嵌套<a> ，但如果我理解你的問題，這就是你需要的：

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