Question

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

即使我用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>

你建议我做什么？

Answer 1

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

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

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

Answer 2

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

例如，

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

希望这有帮助。

Answer 3

为了做你想做的事情，你必须首先了解 a：悬停必须来自 a：link 和 a：visited 在CSS定义中才能有效。如果他们不按此顺序，则他们将无法工作。

其次，你必须明白，如果你在思考（a：active）意味着最终用户所在的当前链接的颜色，这是不正确的。（a：活动）在您单击链接时更改颜色。您可以通过按住与（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>

我希望我能给你一个坚实的答案，因为我讨厌它，当我看到整个网络，无法真正找到我想要的答案。

Answer 4

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

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

Answer 5

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

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

的规则添加.item-109 .current .active

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

Answer 7

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

Here's a link with more information on !important

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

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

然后在每个页面中

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

9 个答案: