이 기사에서는 JS가 멀티 옵션 전환 내비게이션 메뉴를 구현하는 방법에 대해 설명합니다. 참조를 위해 공유하십시오. 특정 구현 방법은 다음과 같습니다.
코드 사본은 다음과 같습니다.
<html>
<헤드>
<meta http-equiv = "content-type"content = "text/html; charset = gb2312">
<title> 다중 옵션 토글 내비게이션 메뉴 </title>
</head>
<스타일 유형 = "텍스트/CSS">
#dnavbar {
배경색 : #ffffff;
}
#dnavbar li {
목록 스타일 유형 : 없음;
플로트 : 왼쪽;
너비 : 84px;
높이 : 28px;
라인 높이 : 28px;
글꼴 크기 : 12px;
색상 : #ffffff;
국경 : 1px Solid #ffffff;
배경 :#86c2ff;
텍스트 정렬 : 센터;
디스플레이 : 블록;
커서 : 포인터;
}
#submenu {
배경 :#99cc66;
너비 : 500px;
왼쪽 경계 : 1px 솔리드 #ffffff;
경계 오른쪽 : 1px 솔리드 #ffffff;
높이 : 29px;
라인 높이 : 29px;
색상 : #ffffff;
글꼴 크기 : 12px;
왼쪽 패딩 : 10px;
}
몸 {
여백 : 0px;
}
A : 링크, A : 방문 {
색상 : #ffffff;
텍스트 결정 : 없음;
}
A : 호버 {
색상 : #ffffff;
텍스트 결정 : 없음;
}
</스타일>
<script language = "javaScript">
함수 showmenu ()
{
var barctt = document.getElementByIdx_x ( "dnavbar")
var liarr = barctt.getElementsBytagname_r ( "li")
var links = new Array ()
링크 [0] = "<a href = '#'> 현재 위치 : 홈페이지"
링크 [1] = "<a href = '#'> project 1 </a> | <a href = '#'> project 2 </a> | <a href = '#'> project 3 </a> <a href = '#'> project 4 </a>"
링크 [2] = "<a href = '#'> project 1 </a> | <a href = '#'> project 2 </a> | <a href = '#'> project 3 </a>"
링크 [3] = "<a href = '#'> project 1 </a> | <a href = '#'> project 2 </a> | <a href = '#'> project 3 </a> | <a href = '#'> project 4 </a> | <a href = '#'> project 5 </a>"
링크 [4] = "<a href = '#'> project 1 </a> | <a href = '#'> project 2 </a>"
링크 [5] = "<a href = '#'> project 1 </a> | <a href = '#'> project 2 </a> <a href = '#'> project 3 </a>"
링크 [6] = "<a href = '#'> project 1 </a> | <a href = '#'> project 2 </a>"
링크 [7] = "<a href = '#'> project 1 </a> | <a href = '#'> project 2 </a>"
링크 [8] = "<a href = '#'> project 1 </a> | <a href = '#'> project 2 </a>"
링크 [9] = "<a href = '#'> project 1 </a> | <a href = '#'> project 2 </a>"
링크 [10] = "<a href = '#'> project 1 </a> | <a href = '#'> project 2 </a>"
링크 [11] = "<a href = '#'> project 1 </a> | <a href = '#'> project 2 </a>"
링크 [12] = "<a href = '#'> project 1 </a> | <a href = '#'> project 2 </a>"
for (i = 0; i <liarr.length; i ++)
{
liarr [i] .onclick = function ()
{
select this (this, liarr, 링크)
}
}
}
함수 select this (indexobj, allli, infoarr)
{
var index = 0;
for (i = 0; i <allli.length; i ++)
{
allli [i] .style.border = "1px solid #ffffff";
allli [i] .style.backgroundcolor = "#86c2ff";
allli [i] .style.height = "28px";
if (indexobj == allli [i])
{
색인 = i;
}
}
indexobj.style.borderbottom = "0px solid #666688";
indexobj.style.backgroundcolor = "#99cc66";
indexobj.style.height = "31px";
document.getElementByIdx_x ( "submenu"). innerhtml = infoarr [index];
}
</스크립트>
<body onload = "showmenu ()">
<div id = "dnavbar"style = "float : none; width : 560px;"> <li> home </li> <li> Entertainment Express </li> <li> Music World </li> <li> Flash </li>
</div>
<div id = "submenu"> Site Affairs 발표 </div>
</body>
</html>
이 기사가 모든 사람의 JavaScript 프로그래밍에 도움이되기를 바랍니다.