如何在css中突出显示当前打开的页面链接 [英] how to highlight currently opened page link in css

问题描述

我在左侧导览面板中有一组连结。我想突出打开的链接。我使用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; } 
  

通过使用：active，链接将只有一个非常短的时间一个点击链接。但我期望链接在其页面打开时突出显示。 CSS中有这样的可行性吗？

解决方案

：活动伪类仅适用于当前处于选定阶段的元素。例如在按钮的情况下，按钮可以是红色的，当将鼠标悬停在其上时，它变成蓝色。这里你使用：hover伪类。现在当你点击按钮（只是左击下来，不释放它），该按钮变为绿色。现在是：活动的伪类。

为你想要的，链接在页面打开和显示时连续突出显示，你可以使用javascript或只是简单的css。

最简单的方式，plain css方式只是有一个类突出显示，并设置一些css属性像背景ans东西， / p>

  .highlighted {background-color：＃000; color：#fff; }  

只是将突出显示的类应用到所需的链接例如，如果你在link2.html页面上，那么你想要在ul列表中的link2被突出显示。所以在你的link2.html页面中，在引用链接的ul元素中，只需将类应用于link2 like ..

  .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 < / a>< / li>< / ul>< / div>< / a>< / a>< / a>< / url> / code> 
 

这是最简单的css解决方案。 / p>

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

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

希望我已经阐明了你想做什么。祝你好运

I have a set of links in the left navigation panel. And I wanted to highlight the opened link. I'm using css for my website.

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

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

By using a:active, the link will have this property only for a very short time of just one click on the link. But I'm expecting the link to be highlighted while its page is opened. Is there such feasibility in CSS?

解决方案

The :active pseudo class is only for elements tht are currently in the selected stage. For example in the case of a button, the button could be red color , when you hover the mouse over it it turns to blue. Here you use the :hover pseudo class. Now when you click the button ( just left click down, dont release it yet) the button turns green. Now that is the :active pseudo class.

for what you are wanting, where the link is continuously highlighted when the page is opened and displayed, you can do it either using javascript or just plain css.

the simplest way, the plain css way is just have a class called "highlighted" and set some css property like background ans stuff like,

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

just apply the "highlighted" class to the link you want.For example, if you are on link2.html page then you want the "link2" in your ul list to be highlighted. So inside your link2.html page, in your ul element referencing the links, just apply the class to link2 like..

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

This is the easiest css solution for what you want to achieve.

Now the javascript version of doing this is not difficult by any means, but a little more complicated than the just css approach. I say it is a little more complicated because you are dynamically going to manipulate the element properties. Now you do have to watch out for what you are doing bcause you might accidentally change some DOM property that you do not want to change but altogether it is not difficult.

now for javascript approach now you can decide to do this in native javascript or use some jquery or other libraries. Jquery makes writing the code simpler but you have to link the jquery source to you html file, which adds memory/file size to your page. This part I will let you decide what you want to do and how you want to proceed.

HopefullyI have shed some light into what you are wanting to do. Good luck

这篇关于如何在css中突出显示当前打开的页面链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！