如何在列表中更改锚标记的颜色,以便在已设置为另一种颜色时处于活动状态?

时间:2013-08-29 05:12:50

标签: html css

我已经将列表中锚标记的文本颜色设置为CSS文件中的BLACK。现在我想将列表项声明为活动并更改其文本颜色,但它不起作用。请帮忙!

这是预设颜色:

#already-set li a
{
    font: normal 14px Arial;
    border-top: 1px solid #ccc;
    display: block;

    color: black;

    text-decoration: none;
    line-height:26px;
    padding-left:5px;            
}

这是更改活动列表项颜色的代码:

a#active
{
    background-color: #d11250;

    color: white;

    font-weight:bold;   
}

这是我的HTML:

<ul id="already-set">                               
  <li><a href="#" id="active"> List Item </a></li>
</ul>

2 个答案:

答案 0 :(得分:4)

您对a:active ...

感到困惑 编辑:道歉我的答案不明确。

请检查此 EXAMPLE ,这将使其更加清晰。我点击了jQuery来动态更改活动元素。

HTML

<ul id="already-set">
    <li><a href="#" > List Item 1</a>
    </li>
    <li><a href="#" class="active"> List Item 2</a>
    </li>
    <li><a href="#" > List Item 3</a>
    </li>
</ul>

JS

$(function() {
   $("a").click(function() {
      // remove classes from all
      $("a").removeClass("active");
      // add class to the one we clicked
      $(this).addClass("active");
   });
});

CSS

#already-set li a {
    font: normal 14px Arial;
    border-top: 1px solid #ccc;
    display: block;
    color: black;
    text-decoration: none;
    line-height:26px;
    padding-left:5px;
}
a.active{
    background-color: #d11250;
    color: white;
    font-weight:bold;
}

编辑2

由于列表中的css,文本颜色保持黑色。如果您要在所选元素中将文字颜色更改为白色,请按照 EXAMPLE 2

进行以下更改

a.active更改为#already-set li a.active

这会解决您的问题吗?

答案 1 :(得分:1)

a#active更改为a:active这将解决您的问题。