메뉴 하이라이트_자바스크립트 기술을 구현하는 두 개의 간단한 JS 코드

정적 페이지를 작성할 때 강조 표시를 하기 위해 페이지마다 다른 스타일을 추가했던 기억이 납니다. 강조 표시는 웹 프런트엔드에서 일반적으로 사용되는 효과인 것 같은데 이번에 다시 사용하게 되었습니다.

사실 아이디어는 매우 간단합니다. 첫 번째 방법은 링크 그룹의 href 값을 탐색하고 indexOf를 사용하여 href 값이 현재 URL에 포함되어 있는지 확인하는 것입니다. 예를 들어, iframe 내의 메뉴는 이러한 방식으로 판단할 수 없으며 구현 아이디어는 상대적으로 간단합니다. 클릭하면 클릭한 항목이 강조 스타일로 로드됩니다.

현재 URL 값을 강조 표시하는 첫 번째 코드 유형:

코드 복사 코드는 다음과 같습니다.

//@Mr.Think---
function highURL(menuId,classCur){를 강조 표시하는 메뉴를 구현할 URL을 결정합니다.
if(!document.getElementById) return false;
if (!document.getElementById(menuId)) return false;
if(!document.getElementsByTagName) return false; getElementById(menuId);
varlinks=menuId.getElementsByTagName("a ");
for(var i=0; ivar menuLink=links[i]. href;
var currentLink=window.location.href;
if(currentLink.indexOf(menuLink)!=-1){
links[i].className=classCur; }
}


매개변수 설명:

1.menuId: 링크 그룹의 ID
2.classCur: 강조 표시된 경우 스타일 클래스 이름. 방법:

window.onload=function highThis( ){highURL("youId","youhighclass");}
두 번째 유형의 클릭은 현재 클래스를 강조 표시합니다.




코드 복사

코드는 다음과 같습니다. //@Mr.Think---강조 표시기능을 구현하려면 클릭하세요. highOnclick(elemId,classCur) {

if (!document.getElementsByTagName ) return false;

if (!document.getElementById) return false
if (!document.getElementById(elemId)) return false; 🎜>var elemId = document.getElementById(elemId);
var link = elemId.getElementsByTagName("a")
for (i = 0; i links [i].onclick = function() {
for (n = 0; n links[n].className = ""
this.className = classCur ;
this.blur();
}
}
}
}


매개변수 설명:

1.elemId: ID 링크 그룹
2.classCur: 이름을 클릭하면 표시되는 스타일 클래스

호출 방법:

window.onload=function highThis(){highOnclick("youId","youhighclass"); }
이 방법은 확장성이 뛰어납니다. 예를 들어 parentNode .nodeName 값을 판단하여 특정 유형의 링크가 통과되는 것을 방지할 수 있습니다.
소스 코드 다운로드 및 시연
몇몇 친구들은 그렇지 않기 때문에 사용법을 몰라서 제가 예전에 작성했던 이 수업과 관련된 페이지들을 특별히 정리했습니다. DEMO 페이지와 다운로드 주소를 주시면, 필요한 친구들은


패키지를 보거나 다운로드할 수 있습니다. 다운로드 주소