Вопрос по hyperlink, css, html – как выделить ссылку на открытую страницу в css

1

У меня есть набор ссылок в левой панели навигации. И я хотел выделить открытую ссылку. Я использую 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?

Вы ищете посещенную ссылку ??? Manjunath Siddappa
@ManjunathSiddappa: нет, не посещал. «посещенный» означает «посещенный», и он всегда говорит, что посещен, даже если навигация переходит на другие страницы но я ищу при щелчке левой навигационной ссылки и открытии конкретной страницы в области тела, пока навигация не переместится на другую страницу, ссылка на открытую страницу должна быть выделена. Nani
Честно говоря, я не совсем уверен, что это возможно без каких-либо сценариев user3542456

Ваш Ответ

1   ответ
3

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

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

самый простой способ, простой способ css - это просто иметь класс с именем «подсвеченный» и установить некоторые свойства css, такие как background и такие вещи, как,

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

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

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

@ Билли - Спасибо, я ценю это :) Sai
Большое спасибо за подробное объяснение !! Nani
Хороший ответ, Сай, Хорошо подумав, поменяв класс на ссылку на своей странице, на самой странице, чтобы она была выделена. Хороший трюк +1 Billy

Похожие вопросы