单击链接后应用css效果？答案

【问题标题】：Apply css effect after link is clicked?单击链接后应用css效果？
【发布时间】：2013-06-05 22:33:35
【问题描述】：

如果点击的导航链接是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;
}

【问题讨论】：

“基本上，点击页面的导航链接应该被突出显示”——这不是“活动”的意思。活跃的意思是“正在被点击”。
也许这会对你有所帮助。 hicksdesign.co.uk/journal/highlighting-current-page-with-css

标签： html asp.net css colors hyperlink

【解决方案1】：

据我所知，没有 CSS Pseudo 类来添加 active 属性。但是，创建一个名为 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类

【讨论】：

不要将其称为活动，这只是要求与:active混淆

【解决方案2】：

你可以试试：-

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

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

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

【讨论】：

:active 表示“被点击”而不是“具有指向当前 url 的 href 属性”。这不会满足问题的要求。
我没听懂..想说什么..你能解释一下吗？？
很抱歉造成混淆 - 所以当我点击页面时，如果该页面的导航按钮应该不同，因为链接是打开的

【解决方案3】：

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

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

例如：

<li class="currentPage">

【讨论】：