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

Question

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

你建议我怎么做？

score 10 · Accepted Answer

最后通过实验，我发现了如何捕捉它。

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

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

score 6 · Accepted Answer

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

其次，您必须了解，如果您认为 (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>

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

score 5 · Accepted Answer

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

例如，

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

希望这可以帮助。

score 4 · Accepted Answer

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

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

score 1 · Accepted Answer

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

score 1 · Accepted Answer

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

score 0 · Accepted Answer

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

这是一个包含更多信息的链接!important。

score 0 · Accepted Answer

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

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

score -2 · Accepted Answer

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

然后在每一页

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

9 回答 9

Related

Reference