Как выделить текущую открытую ссылку на страницу в 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; } 

С помощью: активная, ссылка будет иметь это свойство только в течение очень короткого промежутка времени только один клик по ссылке. Но я ожидаю, что ссылка будет выделена при открытии ее страницы. Есть ли такая возможность в CSS?

Answer 1

Активный псевдокласс предназначен только для элементов, которые в данный момент находятся на выбранном этапе. Например, в случае кнопки кнопка может быть красного цвета, когда вы наводите указатель мыши на нее, она становится синей. Здесь вы используете псевдо-класс: hover. Теперь, когда вы нажимаете кнопку (просто щелкните левой кнопкой мыши, еще не отпустите ее), кнопка станет зеленой. Теперь это: активный псевдокласс.

для чего вы хотите, где ссылка постоянно выделяется при открытии и отображении страницы, вы можете сделать это либо с помощью javascript, либо с помощью простого css.

самого простой путь, обычный CSS путь просто имеет класс под названием «выделен» и установить некоторые CSS свойство как фон анс вещь, как,

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

просто применить «выделено «класс к нужной вам ссылке. Например, если вы находитесь на странице link2.html, вам нужно выделить« link2 »в вашем списке ul. Так внутри вашей страницы link2.html в ваш уль элемент ссылки на ссылки, просто применить класс 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-файлом, который добавляет размер памяти/файла на вашу страницу. В этой части я дам вам возможность решить, что вы хотите сделать и как вы хотите продолжить.

Надеюсь, я пролил свет в то, что вы хотите сделать. Удачи