Bootstrap在标头中创建活动按钮链接

嘿，我正在学习bootstrap/CSS，同时我设计了一门课程的网站。Bootstrap在标头中创建活动按钮链接

现在，我有我的头这是罚款。有一些按钮，其中有一个标签可以覆盖所有这些按钮，并且这些按钮都位于一些div和容器内。

我想要它，所以当我点击主页或任何按钮被激活时，我可以改变它的颜色，例如当我在网站的那部分时灰色。我试过&：活跃，但它不这样工作。

对不起，如果它之前我已经搜查了很多，并不知道如何找到它。还检查了bootstrap文档。

继承人是我的代码

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>

来源

2016-04-08 mateo_io

尝试增加一个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'); 
    }); 
});

来源

2016-04-08 02:19:54 claudios

这可能是它。我已经实现了它，但我不知道应该在哪里添加.active类。我是否将它添加到按钮，以.btn类，链接？ –

是的，你可以做到。你也可以保持原样。 jquery选择器中的按钮指向按钮元素。 – claudios

或者尝试将您的按钮替换为锚标签，然后将jquery选择器替换为'a'。 – claudios

做这样的，给class名字您的按钮，假设的人，然后在乌尔CSS .man:active给它颜色U希望。

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

现在如果u想，ü点击一个按钮后，颜色应保持不变，曾经按钮已被访问过的，

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

来源

2016-04-08 03:12:21 Manish62

被访问的作品正常。问题是，如果我转到另一个选项卡，则访问选项卡不会刷新到其原始状态。颜色保持不变，所以对我不起作用。 –

那你想要什么？ – Manish62

Bootstrap在标头中创建活动按钮链接

回答

相关问题