如何在css中突出显示当前打开的页面链接

Question

我在左侧导航面板中有一组链接。我想突出显示打开的链接。我正在为我的网站使用 css。

HTML 代码：

<div id="LEFTmenu">
<ul>
<li><a href="link_01.html">Link1</a></li>
<li><a href="link_02.html">Link2</a></li>
<li><a href="link_03.html">Link3</a></li>
<li><a href="link_04.html">Link4</a></li>
<li><a href="link_05.html">Link5</a></li>
</ul>
</div>

CSS 代码：

#LEFTmenu {
    line-height:30px;
    width: 200px; 
    float: left; 
    margin-top: 10px; 
    background-color: #FFFFFF;}

#LEFTmenu ul {
    padding: 0;
    margin: 0 0 20px 15px;
    list-style: none;
    list-style-type: none;
    font-size: 14px;  }

#LEFTmenu ul li a:link, a:visited {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    color: #333;  }

#LEFTmenu ul li a:hover {
    color: #CC3366;  }   

 #LEFTmenu ul li a:active {
    color: #33FFFF;  }

通过使用 a:active，链接将仅在很短的时间内具有此属性，只需单击链接即可。但我希望在打开其页面时突出显示该链接。 CSS中有这样的可行性吗？

Answer 1

:active 伪类仅适用于当前处于选定阶段的元素。例如，在按钮的情况下，按钮可能是红色的，当您将鼠标悬停在它上面时，它会变成蓝色。这里你使用 :hover 伪类。现在，当您单击按钮时（只需左键单击，不要释放它）按钮变为绿色。现在是 :active 伪类。

对于您想要的，当页面打开和显示时链接会不断突出显示，您可以使用 javascript 或纯 css 来实现。

最简单的方法，简单的 css 方法就是有一个名为“highlighted”的类，并设置一些 css 属性，如背景和类似的东西，

   .highlighted{
       background-color:#000;
       color:#fff;
    }

只需将“highlighted”类应用于您想要的链接。例如，如果您在 link2.html 页面上，那么您希望 ul 列表中的“link2”被突出显示。因此，在您的 link2.html 页面中，在您的 ul 元素中引用链接，只需将类应用于 link2 就像..

.highlighted{
  color:#fff;
  background-colo:#000;
 }

<div id="LEFTmenu">
<ul>
<li><a href="link_01.html">Link1</a></li>
<li class="highlighted"><a href="link_02.html">Link2</a></li>
<li><a href="link_03.html">Link3</a></li>
<li><a href="link_04.html">Link4</a></li>
<li><a href="link_05.html">Link5</a></li>
</ul>
</div>

这是您想要实现的最简单的 css 解决方案。

现在的 javascript 版本无论如何都不难，但比单纯的 css 方法要复杂一些。我说这有点复杂，因为您将动态地操作元素属性。现在你必须注意你正在做的事情，因为你可能会不小心更改了一些你不想更改的 DOM 属性，但总的来说这并不困难。

现在对于 javascript 方法，您可以决定在本机 javascript 中执行此操作，或者使用一些 jquery 或其他库。 Jquery 使编写代码更简单，但您必须将 jquery 源链接到您的 html 文件，这会增加页面的内存/文件大小。这部分我将让你决定你想做什么以及你想如何进行。

希望我已经阐明了您想要做的事情。祝你好运