如何在 bootstrap css 中更改活动链接颜色？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16557637/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change active link color in bootstrap css?
提问by Firdavs Kurbonov
I am using joomla 3 and bootstrap.min.js I am creating menu and giving special class in order to change hover, active, visited links and style of the menu. I could not find how to change active link color of menu. Suppose I have 2 menu. Home and Contact. When I am in Home it is red, I want to change this color. I could change a:active and a:hover. Here is code;
我正在使用 joomla 3 和 bootstrap.min.js 我正在创建菜单并提供特殊类以更改菜单的悬停、活动、访问的链接和样式。我找不到如何更改菜单的活动链接颜色。假设我有 2 个菜单。主页和联系方式。当我在家时它是红色的，我想改变这种颜色。我可以更改 a:active 和 a:hover。这是代码；
.topmenu .active a,
.topmenu .active a:hover {
background-color: white;
}
.topmenu > li > a{
color: orange;
font-weight:bold;
}
.topmenu > li > a:hover {
color: black;
background:white;
}
Even I used div to change color of active link. Here is code
甚至我使用 div 来更改活动链接的颜色。这是代码
#top-menu a{
background-color: white;
color: orange;
font-weight:bold;
}
#top-menu a:focus
{
color: orange;
}
#top-menu a:hover{
color: black;
}
Every time when I click to Home it is activated and the color is red. What I want to change it to orange. Can not find how to do it.
每次当我点击主页时它都会被激活并且颜色是红色的。我想把它改成橙色。找不到怎么做。
Here is my markup code
这是我的标记代码
<div id="top-menu">
<ul class="nav menu nav-pills topmenu">
<li class="item-109 current active"><a href="/joomla3/">Home</a></li>
<li class="item-138"><a href="/joomla3/?Itemid=138"> Russian </a></li>
<li class="item-110"><a href="/joomla3/?Itemid=110"></a></li></ul>
</div>
What do you suggest me to do?
你建议我做什么？
采纳答案by Firdavs Kurbonov
Finally with experiments I found how to capture it.
最后通过实验我找到了如何捕捉它。
#top-menu .current a
{
color: orange !important;
}
Thank you everyone for your time and help. Much appreciated!
感谢大家的时间和帮助。非常感激！
回答by Jonathan Bellavaro
In order to do what your are trying to do you must first understanda:hover Must come after a:link and a:visited in the CSS definition in order to be effective. If they are not in this order then they will not work.
Second is you must understand that if you where thinking (a:active) meant the color of the current link the end user was on, this is incorrect. (a:active) changes the color when you click on the link. You can test this by holding down the mouse button on the link that you made a different color with the (a:active).
Finally, if you are trying to do this using just CSS you have to add a specific class on the current link that the end user is on. Below I left you an example hope this helps :)
为了做什么你正在尝试做的，你必须先了解一个：hover必须 跟从一：链接和一个：拜访，才能在CSS的定义是有效的。如果它们不按此顺序排列，则它们将无法工作。
其次，您必须明白，如果您认为 (a:active) 意味着最终用户所在的当前链接的颜色，这是不正确的。(a:active) 单击链接时会更改颜色。您可以通过在使用 (a:active) 设置不同颜色的链接上按住鼠标按钮来测试这一点。
最后，如果您尝试仅使用 CSS 来执行此操作，则必须在最终用户所在的当前链接上添加特定类。下面我给你留下了一个例子希望这会有所帮助:)
Your Navigation Bar As Follows
-Home
-Russia
-Italy
您的导航栏如下
-
首页-俄罗斯-
意大利
We are on the Italy Page For This Example:
我们在此示例的意大利页面上：
/*YOUR CSS SHOULD LOOK LIKE THIS*/
/* unvisited link grey */
#top-menu a:link {
color: #777;
}
/* visited link grey */
#top-menu a:visited {
color: #777;
}
/* mouse over link blue */
#top-menu a:hover {
color: #0CF;
}
/* selected link blue */
#top-menu a:active {
color: #0CF;
}
/* !IMPORTANT ONLY ADD THIS CLASS TO YOUR ACTIVE PAGE LINK ( Color Blue )*/
.activePage a {
color: #0CF !important
}<div id="top-menu">
<ul class="nav menu nav-pills topmenu">
<li><a href="http://yourdomain.com/page1.html">Home</a></li>
<li><a href="http://yourdomain.com/page2.html">Russian</a></li>
<li class="activePage"><a href="http://yourdomain.com/page3.html">Italy</a></li><!--Page End User Is On-->
<!--Look UP ^^^^^^^^ Hope this helps :)-->
</ul>
</div>Notice I did not put the .activePage tag in the other links? What this does is allow your original colors that you choose in your css for your navigation bar to still take place while the page that is active stays solid with a different color.
请注意我没有将 .activePage 标记放在其他链接中？这样做的目的是让您在 css 中为导航栏选择的原始颜色仍然存在，而处于活动状态的页面以不同的颜色保持纯色。
The reason this worked is because I added !importantat the end of the color for that separate class.
这样做的原因是因为我在该单独类的颜色末尾添加了!important。
.activePage {
color: #0CF !important
}Home Page
主页
/*YOUR CSS SHOULD LOOK LIKE THIS*/
/* unvisited link grey */
#top-menu a:link {
color: #777;
}
/* visited link grey */
#top-menu a:visited {
color: #777;
}
/* mouse over link blue */
#top-menu a:hover {
color: #0CF;
}
/* selected link blue */
#top-menu a:active {
color: #0CF;
}
/* !IMPORTANT ONLY ADD THIS CLASS TO YOUR ACTIVE PAGE LINK ( Color Blue )*/
.activePage a {
color: #0CF !important
}<div id="top-menu">
<ul class="nav menu nav-pills topmenu">
<li class="activePage"><a href="http://yourdomain.com/page1.html">Home</a></li>
<li><a href="http://yourdomain.com/page2.html">Russian</a></li>
<li><a href="http://yourdomain.com/page3.html">Italy</a></li>
</ul>
</div>回答by Nitesh
I suggest you creating an ID (#)selector locally for the Divthat contains the alinks, then take that idname in your style-sheet and override the existing rule.
我建议您ID (#)为Div包含a链接的本地创建一个选择器，然后id在样式表中使用该名称并覆盖现有规则。
For instance,
例如，
#abc a{xxx:xxx;}
#abc a:active{xxx:xxx;}
Hope this helps.
希望这可以帮助。
回答by Ranvir gorai
For change the current active link color we can use code in external css file or inline css
要更改当前活动链接的颜色，我们可以使用外部 css 文件或内联 css 中的代码
.active a
{
background-color:#ff0000;
}
回答by user3552895
// Fix navigation menu active links
$(document).ready(function(){
var path = window.location.pathname,
link = window.location.href
;
$('a[href="'+path+'"], a[href="'+link+'"]').parent('li').addClass('active');
});
回答by Tieson T.
If you want to globally change the link colors (or pretty much anything else), create a customized download: http://twitter.github.io/bootstrap/customize.html
如果您想全局更改链接颜色（或几乎任何其他颜色），请创建自定义下载：http: //twitter.github.io/bootstrap/customize.html
In response to your comment, if you want to override the supplied CSS, you need to create a rule that is more specific. So, either create a selector like #my-custom-container .item-109 .current .activeor add a !importantto your rule(s) for .item-109 .current .active
针对您的评论，如果您想覆盖提供的 CSS，您需要创建一个更具体的规则。因此，要么创建一个类似的选择器，要么在您的规则中#my-custom-container .item-109 .current .active添加一个!important.item-109 .current .active
回答by Tieson T.
Try changing your CSS to .item-109 { color: white !important; }.
尝试将 CSS 更改为.item-109 { color: white !important; }.
回答by Anbarasan
$(function (){
$('nav ul li a.sub-menu').each(function(){
var path = window.location.href;
var current = path.substring(path.lastIndexOf('/')+1);
var url = $(this).attr('href');
if(url == current){
$(this).addClass('active');
};
});
});
回答by sagar pagare
first add phpcode in link
首先php在链接中添加代码
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link <?php if(PAGE == 'index') { echo 'active'; } ?>" href="index.php">Home</a>
</li>
<li class="nav-item">
<a class="nav-link <?php if(PAGE == 'about-us') { echo 'active'; } ?>" href="about-us.php">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link <?php if(PAGE == 'contact-us') { echo 'active'; } ?>" href="contact-us.php">Contact Us</a>
</li>
</ul>
then in every page
然后在每一页
