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

: active 의사 클래스는 현재 선택한 스테이지에있는 요소에만 적용됩니다. 예를 들어 버튼의 경우 버튼이 빨간색 일 수 있습니다. 마우스를 가져 가면 파란색으로 바뀝니다. 여기에서는 : hover 의사 클래스를 사용합니다. 이제 버튼을 클릭하면 (왼쪽 클릭 만하면 아직 풀리지 않음) 버튼이 녹색으로 바뀝니다. 이제 그것은 : 활성 의사 클래스입니다.

페이지가 열리고 표시 될 때 링크가 계속 강조 표시되는 곳에서는 javascript 나 그냥 css를 사용하여 할 수 있습니다.

가장 간단한 방법은, 일반 CSS의 방법은 단지라는 클래스가 "강조"와 같은 배경 ANS 물건 같은 일부 CSS 속성을 설정하고,

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

단지 "강조 적용 "클래스를 원하는 링크에 추가하십시오. 예를 들어, link2.html 페이지에있는 경우 ul 목록의"link2 "를 강조 표시해야합니다. 당신의 UL 요소는 링크를 참조에 따라서 당신의 link2.html 페이지 내에서, 단지 이것은 당신이 무엇을 달성하고자하는 가장 쉬운 CSS의 솔루션입니다 ..

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

을 같은 LINK2 할 수있는 클래스를 적용 .

지금이 작업을 수행하는 자바 스크립트 버전은 어떤 수단으로도 어렵지 않지만, 그냥 CSS 방식보다 조금 복잡합니다. 동적으로 요소 특성을 조작 할 것이므로 좀 더 복잡하다고 말합니다. 이제는 변경하고 싶지 않은 일부 DOM 속성을 우연히 변경할 수도 있기 때문에 자신이하는 일을주의해야합니다.하지만 어렵지 않습니다.

이제 자바 스크립트 접근 방식을 사용하면 기본 자바 스크립트에서이를 수행하거나 일부 jquery 또는 다른 라이브러리를 사용할 수 있습니다. Jquery는 코드를 더 간단하게 작성하지만 jquery 소스를 html 파일에 연결해야합니다.이 파일은 메모리/파일 크기를 페이지에 추가합니다. 이 부분에서는 내가하고 싶은 것을 결정하고 진행 방법을 결정하도록 할 것입니다.

바라건대 내가 원하는 것을 밝혀 주셨으면합니다. 행운을 빌어 요