如下所示 ：
<! 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> <ppan> </span> <span> </span> <span> </span> </span </p> <ul id = "content "> <li> <li> <img src = "images/shuaige1.jpg"> <a href = "#"> </a> </a> <span> </span> </div> <div> <img src = "images/shuaige2.jpg"> <a href = "#"> 杰森・史坦森 杰森・史坦森 </a> <span> </div> <div> <div> <img src = "images/shuaige3.jpg"> <a href = "#"> </a> </a> <span> </div> <div> <img src = "images/shuaige4.jpg"> <a href = "#"> 汤姆・克鲁斯 </a> <span> </div> </div> <img src = "images/shuaige5.jpg"> <a href = "#"> </a> </a> <span> </div> <div> <img src = "images/shuaige6.jpg"> <a href = "#"> </a> <span> src = "images/meinv1.jpg"> <a href = "#"> </a> </a> </a> <span> </div> </div> <div> <img src = "images/meinv2.jpg"> <a href = "#"> </a> <span> </div> <img src = "images/meinv3.jpg"> <a href = "#"> 美女 </a> </a> <span> </div> </div> </div> <img src = "images/meinv4.jpg"> <a href = "#"> </a> <span> </div> <img src = "images/meinv5.jpg"> <a href = "#"> 美女 </a> </a> <span> </div> </div> </div> <img src = "images/meinv6.jpg"> <a href = "#"> </a> <span> </div> </li> <li> <li> <li> src = "images/chongwu1.jpg"> <a href = "#"> 宠物 </a> </a> <span> 每只 666 块 </span> </div> <div> <img src = "images/chongwu2.jpeg"> <a href = "#"> 宠物 </eda> 666 </span> </span> </</</</</<im src = "images/chongwu3.jpg"> <a href = "#"> 宠物 </a> </a> <span> 每只 666 块 </span> </div> <div> <img src = "images/chongwu4.jpg"> <a href = "#"> </a> <666 </did> </did> </did> <666 < src = "images/chongwu5.jpg"> <a href = "#"> 宠物 </a> </a> <span> 每只 666 块 </span> </div> <div> <img src = "images/chongwu6.jpg"> <a href = "#"> 宠物 </la> </li>> </li>> </li>> </li>> </li> <li>> <div> <img src = "images/yingshi1.jpg"> <a href = "#"> </a> </a> <span> </span> </div> <div> <img src = "images/yingshi2.jp"> <a href = "#"> </a> <span </div> </div> </div> src = "images/yingshi3.jpg"> <a href = "#"> </a> </a> <span> </div> </div> </div> <div> <imag/yingshi4.jpg "> <a href ="#"> 千与千寻 </a> <span> </div> <img src = "images/yingshi5.jpeg"> <a href = "#"> </a> </a> <span> </div> </div> </div> <div> <imag/yingshi6.jpg "> <a href ="#"> </a> <span> </div> </li> <li> <li> src = "images/lol1.jpg"> <a href = "#"> </a> <span> </div> </div> <img src = "images/lol2.jpg"> <a href = "#"> </a> <a> <span> 小萝莉一枚 </span> <div> href = "#"> </a> </a> <span> </span> </div> <div> <img src = "images/lol4.jpg"> <a href = "#"> 人马 </a> <span> </span> </div> <div> <images/lol5.jpg "> <a href = "#"> </a> </a> <span> </span> </div> <div> <img src = "images/lol6.jpg"> <a href = "#"> </a> <span> </span> </div> </li> <li> 待开发。。。 </li> </ul> </ul> </ul> <var title> var eleMet. 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>这段代码的关键处在最后的两个의 경우 指针의 경우 遍历和 遍历和 遍历和, 第一个 第一个의 경우 第一个 按钮添加点击事件 按钮添加点击事件 按钮添加点击事件, 而第二个 遍历是确定当前点击的是哪个按钮 遍历是确定当前点击的是哪个按钮, 相应的内容部分就很好控制出现和隐藏了。 相应的内容部分就很好控制出现和隐藏了。
以上这篇 js 中常用的 탭 切换效果 (推荐 推荐) 就是小编分享给大家的全部内容了 就是小编分享给大家的全部内容了, 希望能给大家一个参考, 也希望大家多多支持武林网。 也希望大家多多支持武林网。