如何更改bootstrap css中的活动链接颜色？

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:悬停。这是代码;

.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?

你建议我做什么?

8 个解决方案

#1

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!

谢谢大家的时间和帮助。非常感激!

#2

I suggest you creating an ID (#) selector locally for the Div that contains the a links, then take that id name in your style-sheet and override the existing rule.

我建议您在本地为包含链接的Div创建一个ID(#)选择器,然后在样式表中获取该ID名称并覆盖现有规则。

For instance,

#abc a{xxx:xxx;}
#abc a:active{xxx:xxx;}

Hope this helps.

希望这可以帮助。

#3

In order to do what your are trying to do you must first understand a: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必须在a:link和a:在CSS定义中访问才能生效。如果他们不按此顺序,那么他们将无法工作。其次,你必须明白,如果你在思考(a:active)意味着最终用户所在的当前链接的颜色,这是不正确的。 (a:活动)在您单击链接时更改颜色。您可以通过按住与(a:active)不同颜色的链接上的鼠标按钮来测试此项。最后,如果您尝试仅使用CSS执行此操作,则必须在最终用户所在的当前链接上添加特定类。下面我给你留下了一个例子希望这有助于:)

Your Navigation Bar As Follows
-Home
-Russia
-Italy

你的导航栏跟随-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 !important at the end of the color for that separate class.

这个工作的原因是因为我在这个单独的类的颜色的末尾添加了!important。

.activePage {
  color: #0CF !important
}

So to apply this same technique to your other pages it would simply look like this:

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>

I hope I gave you a solid answer to your question because I hate it when I look all over the web and can't truly find the answer I am looking for.

#4

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;
}

#5

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 .active or add a !important to your rule(s) for .item-109 .current .active

在回复您的评论时,如果要覆盖提供的CSS,则需要创建更具体的规则。因此,要么创建一个像#my-custom-container .item-109 .current .active这样的选择器,要么为你的规则添加一个重要的.item-109 .current .active

#6

// 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');
});

#7

Try changing your CSS to .item-109 { color: white !important; }.

尝试将CS​​S更改为.item-109 {color:white!important; }。

Here's a link with more information on !important.

这是一个链接,其中包含有关!important的更多信息。

#8

        $(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');
                };
            });     
        });