Css 引导创建标题中的活动按钮链接

嘿，伙计们，我正在学习bootstrap/CSS，而我正在为一门课程设计一个网站

现在我的头球很好。有一些按钮，有一个标签覆盖了所有按钮，这些按钮都在一些div和容器中

我想要它，这样当我点击主页或任何激活的按钮时，我可以改变它的颜色，例如，当我在网站的那个部分时，我可以改变它的颜色。我尝试了&:active，但它不是那样工作的

对不起，如果在我搜索了很多东西之前有人问我，我不知道如何找到它。还检查了引导文档

这是我的密码

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>

CSS
标题{
文本对齐：居中；
填充底部：0em；
}
.导航条反转{
背景：灰色；
}
.btn{
边框样式：虚线；
边框颜色：灰色；
线高：5em；
宽度：8em；
a{
颜色：白色；
字号：1.5em；
字体大小：粗体；
显示：块；
宽度：100%；
身高：100%；
&：活动{
背景颜色：灰色；
}
&：悬停{
文字装饰：无；
背景色：海军蓝；
}
}
}
.btn lg{
背景：黑色；
高度：90px；
填充：0px 0px 0px 0px；
}
HTML标题

尝试添加将按钮设置为活动或不活动的jquery。请参阅下面的代码以供参考

HTML:

---

这样做，给你的按钮命名，假设是男人，然后在你的css中。男人：活动的，给你想要的颜色

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

现在如果你想在点击一个按钮后，颜色应该保持不变， 哪个按钮被访问过

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

---

他工作得很好。问题是，如果我转到另一个选项卡，则访问的选项卡不会刷新到其原始状态。颜色一直是一样的，所以对我来说不合适。可能就是这个。我已经实现了它，但是我不知道应该在哪里添加.active类。我是否要将其添加到按钮、.btn类和链接中？是的，您可以这样做。你也可以保持原样。jquery选择器中的按钮指向按钮元素。或者尝试将按钮替换为锚定标记，然后将jquery选择器替换为“a”。

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

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