如何更改引导 css 中的活动链接颜色？答案

【问题标题】：How to change active link color in bootstrap css?如何更改引导 css 中的活动链接颜色？
【发布时间】：2013-05-15 05:38:48
【问题描述】：

我正在使用 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;
}

即使我使用 div 来更改活动链接的颜色。这是代码

#top-menu a{
background-color: white;
color: orange;
font-weight:bold;
}
#top-menu a:focus
{
    color: orange;
}
#top-menu a:hover{
    color: black;
}

每次点击主页时，它都会被激活并且颜色为红色。我想把它改成橙色。找不到怎么做。

这是我的标记代码

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

你建议我做什么？

【问题讨论】：

不要更改引导程序。包括 bootstrap,css 及以下，包括您的自定义 css ，您可以在其中覆盖现有样式
如何覆盖当前活动链接颜色？
在 firefox 中打开--> 在 firefox 中检查，在 CSS 面板中查看影响颜色的类，复制该类，更改颜色并将其放入您的新 css 中
没有帮助。它给了我 class="item-109 current active"
到目前为止，您拥有的所有 3 个答案都应该有效。

标签： css twitter-bootstrap

【解决方案1】：

最后通过实验，我找到了捕捉它的方法。

#top-menu .current a
{
    color: orange !important;
}

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

【讨论】：

【解决方案2】：

为了做你想做的事，你必须首先了解 a:hover Must 在 a:link 和 a:visited 之后>在CSS定义中才能生效。如果它们不按此顺序，则它们将无法工作。

其次，您必须了解，如果您认为 (a:active) 是指最终用户所在的当前链接的颜色，这是不正确的。 (a:active) 单击链接时会更改颜色。您可以通过在您使用 (a:active) 设置不同颜色的链接上按住鼠标按钮来测试这一点。

最后，如果您尝试仅使用 CSS 执行此操作，则必须在最终用户所在的当前链接上添加特定类。下面我给你举了一个例子，希望对你有帮助:)

您的导航栏如下
-首页
-俄罗斯
-意大利

我们在这个例子的意大利页面上：

/*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>

注意我没有在其他链接中添加 .activePage 标签？这样做的目的是让您在 CSS 中为导航栏选择的原始颜色仍然存在，而活动页面保持为不同颜色的纯色。

之所以有效，是因为我在该单独类的颜色末尾添加了 !important。

.activePage {
  color: #0CF !important
}

因此，要将相同的技术应用于您的其他页面，它看起来就像这样：

主页

/*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>

我希望我为您的问题提供了一个可靠的答案，因为当我浏览整个网络并且无法真正找到我正在寻找的答案时，我讨厌它。

【讨论】：

【解决方案3】：

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

例如，

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

希望这会有所帮助。

【讨论】：

你能提供一个小提琴链接或演示链接到代码所在的网站（如果可行的话）吗？ - @FirdavsKurbonov
网站在我的本地机器上。关于fiddle link，不好意思，第一次听说。
jsfiddle.net 您可以将代码粘贴到本网站，点击更新，然后将更新后的 URL 发送给我们，以突出您的问题。
Fiddle 没有传达您的问题。看看您是否可以测试上传您的网站并发送链接。 - @FirdavsKurbonov
我在我的问题中包含了菜单，请参阅。我更新了它。我现在将整个源代码放在 jsFiddle 中。

【解决方案4】：

要更改当前活动链接的颜色，我们可以使用外部 css 文件或内联 css 中的代码

.active a
{
background-color:#ff0000;
}

【讨论】：

【解决方案5】：

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

【讨论】：

不只是转储一段代码，你能试着解释一下代码的作用以及它为什么起作用吗？

【解决方案6】：

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

【讨论】：

【解决方案7】：

尝试将您的 CSS 更改为 .item-109 { color: white !important; }。

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

【讨论】：

我的 CSS 发生了一些奇怪的事情。它不工作。
这个页面是实时的吗？如果是这样，请给我一个链接，我会看看我是否能说出发生了什么。
它在我的本地机器上。正在开发中。我可以把它的图片发给你。但我认为它对你没有帮助。
如何加载页面，打开检查器并上传检查窗口的屏幕截图，以便我们可以看到类名等？这可能会有所帮助。

【解决方案8】：

如果您想全局更改链接颜色（或几乎其他任何内容），请创建自定义下载：http://twitter.github.io/bootstrap/customize.html

针对您的评论，如果您想覆盖提供的 CSS，您需要创建一个更具体的规则。因此，要么创建一个像 #my-custom-container .item-109 .current .active 这样的选择器，要么为 .item-109 .current .active 添加一个 !important 到您的规则中

【讨论】：

不，我想在本地更改。找不到如何捕获它。如果我检查它显示的对象，就像“item-109 current active”一样。
不起作用。我尝试使用 !important 更改它。没有变化。
“不起作用”并不是很有帮助。您能否更新您的问题以包含您迄今为止尝试过的内容？
@FirdavsKurbonov 您使用的选择器不如 Bootstrap 使用的选择器那么具体，因此即使您的 CSS 包含在之后，Bootstrap 仍然会获胜。给我一点时间，我会为你创建一个 jsFiddle。这是导航栏还是导航栏？
@FirdavsKurbonov 您能否为您的问题添加菜单标记的 sn-p？链接本身并不重要；只需要知道菜单的结构。

【解决方案9】：

首先在链接中添加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>

然后在每一页

【讨论】：