Question

我在左侧导航面板中有一组链接。我想强调打开的链接。我在我的网站上使用css。

HTML code：

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

通过使用：active，链接将仅在链接上单击一次的极短时间内具有此属性。但我希望在打开页面时突出显示该链接。 CSS中有这样的可行性吗？

Answer 1

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

对于您想要的内容，当页面打开并显示时，链接会不断突出显示，您可以使用javascript或只是简单的CSS来完成。

最简单的方法，简单的css方式只是有一个名为＆＃34;强调的类＃34;并设置一些css属性，如背景和类似的东西，

＆＃13;

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

＆＃13;

只需应用＆＃34;突出显示＆＃34;类所需的链接。例如，如果你在link2.html页面，那么你想要＆＃34; link2＆＃34;在你的ul列表中突出显示。所以在你的link2.html页面中，在引用链接的ul元素中，只需将类应用于link2就像..

＆＃13;

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

＆＃13;

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

＆＃13;

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

现在这样做的javascript版本并不困难，但比css方法稍微复杂一点。我说它有点复杂，因为你动态地操纵元素属性。现在你必须注意你正在做什么，因为你可能会意外地改变一些你不想改变的DOM属性，但这并不困难。

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

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

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

1 个答案: