如下所示：
<！doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> tab </title> <style> *{margin：0;パディング：0;リストスタイル：なし;} .box {width：1000px;オーバーフロー：隠し;マージン：100px auto 0px; } #title {line-height：40px;背景色：RGB（247,247,247）;フォントサイズ：16px; font-weight：bold;色：RGB（102,102,102）;オーバーフロー：隠し; } #title span {float：left;幅：166px;テキストアライグ：センター; } #titleスパン：Hover { /*color：black;* / cursor：pointer; } #content {マージントップ：20px; } #content li {width：1050px;オーバーフロー：隠し;表示：なし;背景色：RGB（247,247,247）; } #content li div {width：156px;マージン右：14px;フロート：左;テキストアライグ：センター; } #content li div a {font-size：14px;色：黒;ラインハイト：14px; /* float：left;*/ display：inline-block;マージントップ：10px; } #content li a：hover {color：＃b70606; } #content li div span {font-size：16px;ラインハイト：16px; /*float：left;*/ display：block;色：RGB（102,102,102）;マージントップ：10px; } #content img {float：left;幅：155px;高さ：250px; } #title .select {background-color：rgb（10,167,112）;色：白; } #content .show {display：block; } </style> </head> <body> <div> <p id = "title"> <span>帅哥</span> <span> </span> <span>宠物</span> <span> </span> <span>英雄联盟</span> <span>音乐</span> </p> <ul id = "content" src = "images/shuaige1.jpg"> <a href = "＃"> 杰森・史坦森 </a> <pras> </span> </div> <div> <img src = "images/shuaige2.jpg"> <a href = "＃"> 杰森・史坦森 </a> <span> src = "images/shuaige3.jpg"> <a href = "＃"> 汤姆・克鲁斯 </a> <pras> </span> </div> <div> <img src = "images/shuaige4.jpg"> <a href = "＃"＃ "> </a> src = "images/shuaige5.jpg"> <a href = "＃">卷福</a> </a> </a> </span> </div> <div> <img src = "images/shuaige6.jpg"> <a href = "＃"＃ ">卷福</a> src = "images/meinv1.jpg"> <a href = "＃">美女</a> <span> </span> </div> <div> <img src = "images/meinv2.jpg"> <a href = "＃">美女</a> <span src = "images/meinv3.jpg"> <a href = "＃">美女</a> <span> </span> </div> <div> <img src = "images/meinv4.jpg"> <a href = "＃">美女</a> <span src = "images/meinv5.jpg"> <a href = "＃">美女</a> <span> </span> </div> <div> <img src = "images/meinv6.jpg"> <a href = "＃">美女</a> <span src = "images/chongwu1.jpg"> <a href = "＃">宠物</a> <span>每只666 src = "Images/chongwu.jpg"> <a href = "＃">宠物</a> <span>每只666 src = "images/chongwu5.jpg"> <a href = "＃">宠物</a> <span>每只666 <div> <img src = "images/yingshi1.jpg"> <a href = "＃">哈利波特系列</a> <span> </span> </div> <div> <div> <img src = "images/yingshi2.jpg"> <a href = "＃"> src = "images/yingshi3.jpg"> <a href = "＃">变形金刚系列</a> <span> </span> </div> <div> <img src = "images/yingshi4.jpg"> <a href = "＃">千与千寻</a> <span> src = "images/yingshi5.jpeg"> <a href = "＃">龙猫</a> <pras> </span> </div> <div> <img src = "images/yingshi6.jpg"> <a href = "＃">阿甘正传</a> <span> src = "images/lol1.jpg"> <a href = "＃">寒冰射手</a> <span> </span> </div> <div> <img src = "images/lol2.jpg"> <a href = "＃">黑暗之女</a> <span> href = "＃">探险家</a> <span> </span> </div> <div> <img src = "images/lol4.jpg"> <a href = "＃">人马</a> <span> href = "＃">提莫提百万</a> <span> </span> </div> <div> <img src = "images/lol6.jpg"> <a href = "＃">狼人</a> <span> 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>这段代码的关键处在最后的两个の場合は、これは指针、第一个span按钮添加点击事件、而第二个、而第二个、相应的内容部分就很好控制出现和隐藏了。、相应的内容部分就很好控制出现和隐藏了。
以上这篇js中常用的タブ（推荐）就是小编分享给大家的全部内容了、希望能给大家一个参考、也希望大家多多支持武林网。