이 기사는 JavaScript 마우스 스 와이프의 효과를 공유하여 참조 용 보조 메뉴를 표시합니다. 특정 내용은 다음과 같습니다
1. 키 코드 : 스위치 또는 판단 명령문을 사용하여 해당 보조 메뉴 디스플레이 모드를 차단하거나 없음으로 변경합니다.
함수 selectTabMenu (i) {switch (i) {case 71 : docum document.getElementById ( "tabmenucon72"). style.display = "none"; document.getElementById ( "tabmenucon73"). style.display = "none"; document.getElementById ( "tabmenucon74"). style.display = "none"; document.getElementById ( "tabmenucon75"). style.display = "none"; document.getElementById ( "tabmenucon76"). style.display = "none"; 부서지다; ...}}2. 메인 내비게이션 바인딩 이벤트
<ul>
<li> <a href = "#"onmouseover = "selectTabmenu (71)"> home </a> </li>
3. 보조 메뉴
<ul id = "tabmenucon71"> <li> <a href = "#"> 발표 </a> </li> <li> << a href = "#"> 정보 </a> </li> </ul>
4. 코드를 완료하십시오
<! docType html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> 수평 내비게이션-초반 메뉴 </title> <style type = "text/css"> *{padding : 0px; 여백 : 0px; } .navbar {높이 : 30px; 배경색 : #2B383E; 텍스트 정렬 : 센터; } ul {목록 스타일 : 없음; } .nav li {float : 왼쪽; } .nav li a {display : block; 패딩 : 0 20px; 높이 : 30px; 라인 높이 : 30px; 텍스트 결정 : 없음; 색상 : #fff; } .nav li a : 호버 {배경색 : #ffff; 색상 : #4DB6E7} .TabMenucon {Clear : 둘 다; 디스플레이 : 없음; } .tabmenucon li {디스플레이 : 인라인-블록; } </style> <script type = "text/javaScript"> 함수 selectTabMenu (i) {switch (i) {case 71 : document.getElementById ( "tabmenucon71"). style.display = "block"; document.getElementById ( "tabmenucon72"). style.display = "none"; document.getElementById ( "tabmenucon73"). style.display = "none"; document.getElementById ( "tabmenucon74"). style.display = "none"; document.getElementById ( "tabmenucon75"). style.display = "none"; document.getElementById ( "tabmenucon76"). style.display = "none"; CASE 72 : document.getElementById ( "tabmenucon71"). style.display = "none"; document.getElementById ( "tabmenucon72"). style.display = "block"; document.getElementById ( "tabmenucon73"). style.display = "none"; document.getElementById ( "tabmenucon74"). style.display = "none"; document.getElementById ( "tabmenucon75"). style.display = "none"; document.getElementById ( "tabmenucon76"). style.display = "none"; 부서지다; 사례 73 : document.getElementById ( "tabmenucon71"). style.display = "none"; document.getElementById ( "tabmenucon72"). style.display = "none"; document.getElementById ( "tabmenucon73"). style.display = "block"; document.getElementById ( "tabmenucon74"). style.display = "none"; document.getElementById ( "tabmenucon75"). style.display = "none"; document.getElementById ( "tabmenucon76"). style.display = "none"; 부서지다; 사례 74 : document.getElementById ( "tabmenucon71"). style.display = "none"; document.getElementById ( "tabmenucon72"). style.display = "none"; document.getElementById ( "tabmenucon73"). style.display = "none"; document.getElementById ( "tabmenucon74"). style.display = "block"; document.getElementById ( "tabmenucon75"). style.display = "none"; document.getElementById ( "tabmenucon76"). style.display = "none"; 부서지다; 사례 75 : document.getElementById ( "tabmenucon71"). style.display = "none"; document.getElementById ( "tabmenucon72"). style.display = "none"; document.getElementById ( "tabmenucon73"). style.display = "none"; document.getElementById ( "tabmenucon74"). style.display = "none"; document.getElementById ( "tabmenucon75"). style.display = "block"; document.getElementById ( "tabmenucon76"). style.display = "none"; 부서지다; 사례 76 : document.getElementById ( "tabmenucon71"). style.display = "none"; document.getElementById ( "tabmenucon72"). style.display = "none"; document.getElementById ( "tabmenucon73"). style.display = "none"; document.getElementById ( "tabmenucon74"). style.display = "none"; document.getElementById ( "tabmenucon75"). style.display = "none"; document.getElementById ( "tabmenucon76"). style.display = "block"; 부서지다; }} </script> </head> <body> <liv> <ul> <li> <a href = "#"el onmouseover = "selectTabmenu (71)"> home </a> </a> </a> </a> </a> </li> <li> < "#"onMouseOver = "selectTabMenu (72)"> Association </a> </li>> <a href = "<a href. onMouseOver = "selectTabmenu (73)"> Association News </a> </li> <li> <a href = "#"onmouseover = "selectTabmenu (74)"> Association Activity </a> </li> <li> <a href = "#"onmouseover = "selectTabmenu (75)"> 회원 </li> </li>> </li> </li> </li> </li> </li> </li> href = "#"onmouseover = "selectTabmenu (76)"> 자원 공간 </a> </a> </a> </li> </ul> </div> <div id = "tabmenucon"> <ul id = "tabmenucon71"> <li> <a href = "#"> incement </a> <li> </ul> <ul id = "tabmenucon72"> <li> 소개 </li> <li> 정보 </a> </a> </li> </ul> <ul id = "tabmenucon72"> <li> 소개 </li> <li> 조직 </li> <li> 협회 기사 </li> </ul> <ul id = "tabmenucon73"> id = "tabmenucon73"> <li> 정보 </li> </li> </ul> <ul id = "tabmenucon73"> <li> 정보 </li> </ul> <ul id = "tabmenucon74"> <li> 구두 유지 유지 보수의 달 </li> <li> <li> <li> <li> <li> <li> <li> <li> id = "tabmenucon75"> <li> 회원 로그인 </li> <li> 회원 등록 </li> <li> 회원비 지불 </li> <li> 회원 정보 관리 </li> <li> 비밀번호 수정 </li> </ul> <ul id = "tabmenucon76"> <li> ps Tutorial </li> <li> </li> </li> </li> </li> </div> </body> </html>위의 내용은이 기사에 관한 모든 것입니다. 모든 사람의 학습에 도움이되기를 바랍니다.