이 기사의 예제는 참조에 대한 JS 탭 탭 전환의 효과를 공유합니다. 특정 내용은 다음과 같습니다
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> tab </title> <tyle> *{margin : 0; 패딩 : 0; 목록 스타일 : none;} .box {너비 : 1000px; 오버플로 : 숨겨진; 마진 : 100px 자동 0px; } #Title {Line-Height : 40px; 배경색 : RGB (247,247,247); 글꼴 크기 : 16px; 글꼴 중량 : 대담한; 색상 : RGB (102,102,102); 오버플로 : 숨겨진; } #title span {float : 왼쪽; 너비 : 166px; 텍스트 정렬 : 센터; } #title span : hover { /*color : black;* / cursor : 포인터; } #content {마진-탑 : 20px; } #content li {너비 : 1050px; 오버플로 : 숨겨진; 디스플레이 : 없음; 배경색 : RGB (247,247,247); } #content li div {너비 : 156px; 마진 오른쪽 : 14px; 플로트 : 왼쪽; 텍스트 정렬 : 센터; } #content li div a {font-size : 14px; 색상 : 검은 색; 라인 높이 : 14px; /* float : 왼쪽;*/ display : 인라인-블록; 마진-탑 : 10px; } #Content Li A : 호버 {색상 : #B70606; } #content li div span {font-size : 16px; 라인 높이 : 16px; /*float : 왼쪽;*/ display : 블록; 색상 : RGB (102,102,102); 마진-탑 : 10px; } #content img {float : 왼쪽; 너비 : 155px; 높이 : 250px; } #title .select {background-color : rgb (10,167,112); 색상 : 흰색; } #content .show {display : 블록; } </style> </head> <body> <div> <p id = "title"> <span> 잘 생긴 </span> <span> 뷰티 </span> <span> pet </span> <span> movie </span> <span> 리그 오브 레전드> <스팬> 음악 </span> </p> <ul id = "content "> <li> <img src ="image/shuie1.jp. href = "#"> Jason Statham </a> <span> 희귀하고 cool </span> </div> <div> <img src = "images/shuaige2.jpg"> <a href = "#"> Jason Statham </a> <span> 희귀 및 cool </span> <div> <img src = "image/shuae3.3. href = "#"> Tom Cruise </a> <span> 고급, 대기 및 고급 </span> </div> <div> <img src = "images/shuaige4.jpg"> <a href = "#"> Tom Cruise </a> <span> high-end, 대기 및 고가> </div> <img. src = "images/shuaige4.jpg"> <a href = "#"> Tom Cruise </a> <a> <span> 고급, 대기 및 고급 </span> </div> <div> <img src = "images/shuaige4.jpg"> <a href = "#"> tom cruise </high-end> high-end, high-end, and-end, high-end, the and end, <div> <IMG SRC = "Image/Shuaige4.jpg"> <a href = "#"> Tom Cruise </a> </a> <span> 고급, 대기 및 고급 </div </div> <div> <img src = "images/shuaige4.jpg"> 고급 </span> </div> <div> <img src = "images/shuaige5.jpg"> <a href = "#"> Juan fu </a> <span> 로우 키 럭셔리는 의미 </span> </div> <div> <img src = "images/shuaige6.jpg"> fu </a> <span> 로우 키 럭셔리는 의미가 있습니다. href = "#"> beauty </a> <span> 외부 및 부드러운 내부의 분노 </span> </div> <div> <img src = "images/meinv3.jpg"> <a href = "#"> beauty </a> </a> <span> 귀여운 pouting scissors </span> </div> <div> <img src = <indims/meinv4.jpg "> href = "#"> beauty </a> <span> 귀여운 삐걱 거리는 가위 </span> </div> <div> <img src = "images/meinv5.jpg"> <a href = "#"> beauty </a> <span> fusmal, bright, fresh </span> </div> <img src = <images/meinv6. href = "#"> beauty </a> <span> 유행, 밝고 밝고 신선한 </span> </div> </li> <li> <div> <img src = "images/chongwu1.jpg"> <a href = "#"> pets </a> <span> 666 yuan </div> <div> src = "images/chongwu2.jpeg"> <a href = "#"> pets </a> <span> 666 yuan per </span> </div> <div> <img src = "images/chongwu3.jpg"> <a href = "#"> pets </a> 666 </span> </did> </href> </chongwu3.jpg ". src = "images/chongwu4.jpg"> <a href = "#"> pets </a> <span> 666 yuan per </span> </div> <div> <img src = "images/chongwu5.jpg"> <a href = "#"> pets </a <im> <im> <im> <im> <im> <im> </chongwu5.jpg "> src = "images/chongwu6.jpg"> <a href = "#"> pets </a> <span> 666 조각 당 </div> </li> <li> <liv> <img src = "images/yingshi1.jpg"> <a href = "#"</sat </span> classics in classics </ <div> <img src = "images/yingshi2.jpg"> <a href = "#"> 클래식의 고전 </div> <div> <img src = "images/yingshi2.jpg"> <a href = "#"> 세 바보가 볼리우드에서 소란을 만듭니다 </> </> </> span> src = "이미지/yingshi3.jpg"> <a href = "#"> 변압기 시리즈 </a> <span> 흥미롭고 흥미 진진한 </span> </div> <div> <img src = "images/yingshi4.jpg"> <a href = "> shengyu chihiro </a> <div> <img src = "images/yingshi5.jpeg"> <a href = "#"> tongchi </a> <ganchi </a> <span> my chinchilla </span> </div> <div> <img src = "images/yingshi6.jpg"> <a href = "#"> forrest gump </a> forrest> forrest> gump </a> </div> </li> <li> <div> <img src = "images/lol1.jpg"> <a href = "#"> ice sagittarius </a> <span> 아내 </span> </div> <div> <img src = "im <div> <img src = "images/lol3.jpg"> <a href = "#"> 탐색기 </a> <span> 나는 게임에서 가장 잘 생겼습니다 </span> </div> <div> <img src = "images/lol4.jpg"> <a href = "#"> 직원 </a> torno </a> <span> turkish. All-Rounder </a> </div> <div> <img src = "images/lol5.jpg"> <a href = "#"> 터키 백만 </a> <span> 하루에 백만 번 사망. . </span> </div> <div> <img src = "images/lol6.jpg"> <a href = "#"> wewolves </a> <span> 나에게 확대하지 마십시오 </span> </div> </li> <li> 개발되도록하십시오. . . </li> </ul> </div> <cript> var title = document.getElementById ( 'title'); var content = document.getElementById ( 'content'); var spans = title.getElementsByTagName ( 'span'); var lis = content.getElementsByTagName ( 'li'); for (var i = 0; i <spans.length; i ++) {spans [i] .index = i; spans [i] .onclick = function () {for (var j = 0; j <spans.length; j ++) {spans [j] .classname = ''; lis [j] .classname = ''; } this.className = 'select'; lis [this.index] .classname = 'show'; }} </script> </body> </html>이 코드의 핵심은 Traversals 와이 포인터의 마지막 두 가지입니다. Traversal의 첫 번째는 각 스팬 버튼에 대한 클릭 이벤트를 추가하는 것이며 Traversal의 두 번째는 현재 클릭 한 버튼을 결정하는 것입니다. 해당 콘텐츠 부분은 외관을 쉽게 제어하고 숨겨져 있습니다.
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.