Bootstrap在标题中创建活动按钮链接
Bootstrap在标题中创建活动按钮链接
提问于 2016-04-08 10:07:48
嘿，伙计们，我正在学习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>回答 2
Stack Overflow用户
发布于 2016-04-08 10:19:55
尝试添加一个将按钮设置为活动或非活动的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');
});
});Stack Overflow用户
发布于 2016-04-08 11:12:21
这样做，给你的按钮命名，假设class，然后在你的css .man:active中给它指定你想要的颜色。
.man:active{
background-color: #2222;
}.man:visited{
background-color: #ffff;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/36490318
复制相关文章
相似问题
腾讯云开发者
