-2

如果单击的导航链接是，我如何应用特定的 css 方案active？

我尝试了很多选项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;
}
4

3 回答 3

3

据我所知，没有 CSS 伪类来添加活动属性。但是，创建一个名为的新类并将active其添加到您的liora标记并提供适当的样式。小提琴。

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

可以active通过jquery动态添加类

于 2013-06-10T10:16:04.890 回答
0

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

在每个页面上放置一些独特的东西，以识别您所在的页面。然后使用它来应用 CSS。

例如：

<li class="currentPage">
于 2013-06-10T09:52:40.930 回答
0

您可以尝试：-

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

在为多个链接状态设置样式时，有一些顺序规则：

a:hover 必须在 a:link 之后，a:visited
a:active 必须在 a:hover 之后

于 2013-06-10T09:51:11.120 回答