이 글의 예시에서는 js에서 다중 옵션 전환 탐색 메뉴를 구현하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 구현 방법은 다음과 같습니다. 코드 복사 코드는 다음과 같습니다. 다중 옵션 전환 탐색 메뉴 <br> #dNavBar{<br> 배경색:#ffffff;<br> }<br> #dNavBar 리{<br> 목록 스타일 유형:없음;<br> 부동:왼쪽;<br> 너비:84px;<br> 높이:28px;<br> 줄 높이:28px;<br> 글꼴 크기:12px;<br> 색상:#FFFFFF;<br> 테두리:1px 단색 #ffffff;<br> 배경:#86C2FF;<br> 텍스트 정렬:가운데;<br> 디스플레이:블록;<br> 커서:포인터;<br> }<br> #하위메뉴{<br> 배경:#99cc66;<br> 너비:500px;<br> 테두리 왼쪽:1px 단색 #ffffff;<br> 테두리 오른쪽:1px 단색 #ffffff;<br> 높이:29px;<br> 줄 높이:29px;<br> 색상:#FFFFFF;<br> 글꼴 크기:12px;<br> 왼쪽 패딩:10px;<br> }<br> 몸 {<br> 여백: 0px;<br> }<br> a:링크,a:방문함 {<br> 색상: #FFFFFF;<br> 텍스트 장식: 없음;<br> }<br> a:호버{<br> 색상: #FFFFFF;<br> 텍스트 장식: 없음;<br> }<br> </스타일><br> <스크립트 언어="javascript"><br> 기능 ShowMenu()<br> {<br> var barCTT=document.getElementByIdx_x("dNavBar")<br> var liArr=barCTT.getElementsByTagName_r("li")<br> var link=new Array()<br> link[0]="<a href='#'>현재 위치: 집"<br> link[1]="<a href='#'>항목 1> | <a href="#"></a> link[2]="<a href='#'>항목 1</a> | <a href='#'>항목 2</a> | <a href='#' > 프로젝트 3"<br> links[3]="<a href='#'>항목 1> | <a href="#"> | </a><a href="#">프로젝트 4</a> | <a href="#">프로젝트 5</a>" link[4]="<a href='#'>프로젝트 1</a> | <a href='#'>프로젝트 2</a>"<br> links[5]="<a href='#'>항목 1> | <a href="#">"<br> link[6]="<a href='#'>프로젝트 1</a> | <a href='#'>프로젝트 2</a>"<br> link[7]="<a href='#'>프로젝트 1</a> | <a href='#'>프로젝트 2</a>"<br> link[8]="<a href='#'>프로젝트 1</a> | <a href='#'>프로젝트 2</a>"<br> link[9]="<a href='#'>프로젝트 1</a> | <a href='#'>프로젝트 2</a>"<br> links[10]="<a href='#'>프로젝트 1</a>| <a href='#'>프로젝트 2</a>"<br> link[11]="<a href='#'>프로젝트 1</a> | <a href='#'>프로젝트 2</a>"<br> link[12]="<a href='#'>프로젝트 1</a> | <a href='#'>프로젝트 2</a>"<br> (i=0;i<liarr.length></liarr.length> {<br> liArr[i].onclick=function()<br> {<br> selectThis(this,liArr,links)<br> }<br> }<br> }<br> 함수 selectThis(indexObj,allLi,infoArr)<br> {<br> var 인덱스=0;<br> (i=0;i<allLi.length;i )<br /> {<br /> allLi[i].style.border="1px 솔리드 #ffffff";<br /> allLi[i].style.BackgroundColor="#86C2FF";<br /> allLi[i].style.height="28px";<br /> if (indexObj==allLi[i])<br /> {<br /> 인덱스=i;<br /> }<br /> }<br /> indexObj.style.borderBottom="0px 솔리드 #666688";<br /> indexObj.style.BackgroundColor="#99cc66";<br /> indexObj.style.height="31px";<br /> document.getElementByIdx_x("subMenu").innerHTML=infoArr[index];<br /> }<br /> </script><br /> <body onLoad="ShowMenu()"><br> <div id="dNavBar" style="float:none; width:560px;"><li>홈페이지</li><li>Entertainment Express</li><li>뮤직 월드< ;/li> ;<li>궁극의 플래시</li> <br> </div><br> <div id="subMenu">사이트 공지</div><br> </본문><br> </a> </div>
