将活动类和 CSS 添加到按钮引导程序内的链接 <a>

Question

大家好，我在为课程设计网站时正在学习 bootstrap/CSS。

Heroku app

现在我的标题很好。有一些按钮，它们有一个<a> 标签，涵盖了所有这些，并且都在一些 div 和容器中。

检查器显示<a> 标签。我使它们与点击空间的按钮一样大，所以我认为我必须定位这些标签而不是按钮。

我最近尝试彻底检查标题并使用 Bootstrap 文档中的标题并做了一个 jQuery 脚本

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

这改变了白色背景的样式（我选择活跃），但它没有保留。一旦重定向发生，它就消失了。

我是否应该使用 :visited 然后删除它，因为我认为 :visited 是一个在我单击链接时不会改变的属性。

Link to header file

Link to CSS file

这是我认为可以工作的新添加的 CSS，所有类的路径到 <a> 标签。

标题属性不相关，但不想遗漏任何内容。

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

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

}

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

无论您使用 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

我不知道您为什么将 <a> 嵌套在 <button> 中，但如果我理解您的问题，这就是您所需要的：

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