Question

如果点击的导航链接是active？

，如何应用特定的CSS方案？

我尝试了很多选项a:active，a:selection，a:link - 它们都不起作用！

基本上，点击页面的导航链接应突出显示：）

这是我的 CSS ：

ul#menu{
    font-size: 1.3em;
    font-weight: 600;
    margin: 0 0 5px;
    padding: 0;
    text-align: right;
}

ul#menu li{
     display: inline;
     list-style: none;
     padding-left: 15px;
}

ul#menu li a{
    background: none;
    color: #999;
    text-decoration: none;
}

ul#menu li a:hover{
    color: #333;
    text-decoration: none;
}

Answer 1

据我所知，没有CSS Pseudo类来添加活动属性。但是，请创建一个名为active的新类，并将其添加到您的li或a标记中，并提供相应的样式。 Fiddle

HTML标记

<ul id="menu">
<li><a href="#">Link-1</a></li>
<li><a href="#">Link-2</a></li>
<li><a href="#">Link-3</a></li>
<li><a href="#">Link-4</a></li>
<li><a href="#" class="active">Link-5</a></li>
</ul>

CSS标记

ul#menu{
    font-size: 1.3em;
    font-weight: 600;
    margin: 0 0 5px;
    padding: 0;
    text-align: right;
}

ul#menu li{
     display: inline;
     list-style: none;
     padding-left: 15px;
}

ul#menu li a{
    background: none;
    color: #999;
    text-decoration: none;
}

ul#menu li a:hover{
    color: #333;
    text-decoration: none;
}
ul#menu li a.active{
    color:#333;
}

您可以通过jquery

动态添加active类

Answer 2

您可以尝试： -

 ul#menu li a:active {
            color: #0000FF;
            text-decoration: none;
        }

为多个链接状态设置样式时，有一些订单规则：

a：悬停必须在a：link和a：visited
之后 a：主动必须在a：hover之后出现

Answer 3

除:target（仅关注URL的片段标识符部分）外，CSS无法根据URL的当前值选择任何内容。

在每个页面上放置一些独特的内容，以确定您所在的页面。然后使用它来应用CSS。

例如：

<li class="currentPage">

单击链接后应用css效果？

3 个答案: