- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- tab
- </title>
- <style>
- *{margin:0; padding:0; list-style:none;} .box{ width: 1000px; overflow:
- hidden; margin:100px auto 0px; } #title{ line-height: 40px; background-color:
- rgb(247,247,247); font-size: 16px; font-weight: bold; color: rgb(102,102,102);
- overflow: hidden; } #title span{ float: left; width: 166px; text-align:
- center; } #title span:hover{ /*color: black;*/ cursor: pointer; } #content{
- margin-top: 20px; } #content li{ width: 1050px; overflow: hidden; display:
- none; background-color: rgb(247,247,247); } #content li div{ width: 156px;
- margin-right: 14px; float: left; text-align: center; } #content li div
- a{ font-size: 14px; color: black; line-height: 14px; /* float: left;*/
- display: inline-block; margin-top: 10px; } #content li a:hover{ color:
- #B70606; } #content li div span{ font-size: 16px; line-height: 16px; /*float:
- left;*/ display: block; color: rgb(102,102,102); margin-top: 10px; } #content
- img{ float: left; width: 155px; height: 250px; } #title .select{ background-color:
- rgb(10,167,112); color: white; } #content .show{ display: block; }
- </style>
- </head>
- <body>
- <div class="box">
- <p id="title">
- <span class="select">
- 帅哥
- </span>
- <span>
- 美女
- </span>
- <span>
- 宠物
- </span>
- <span>
- 影视
- </span>
- <span>
- 英雄联盟
- </span>
- <span>
- 音乐
- </span>
- </p>
- <ul id="content">
- <li class="show">
- <div>
- <img src="images/shuaige1.jpg" alt="帅哥1">
- <a href="#">
- 杰森·史坦森
- </a>
- <span>
- 狂拽炫酷屌炸天
- </span>
- </div>
- <div>
- <img src="images/shuaige2.jpg" alt="帅哥2">
- <a href="#">
- 杰森·史坦森
- </a>
- <span>
- 狂拽炫酷屌炸天
- </span>
- </div>
- <div>
- <img src="images/shuaige3.jpg" alt="帅哥3">
- <a href="#">
- 汤姆·克鲁斯
- </a>
- <span>
- 高端大气上档次
- </span>
- </div>
- <div>
- <img src="images/shuaige4.jpg" alt="帅哥4">
- <a href="#">
- 汤姆·克鲁斯
- </a>
- <span>
- 高端大气上档次
- </span>
- </div>
- <div>
- <img src="images/shuaige5.jpg" alt="帅哥5">
- <a href="#">
- 卷福
- </a>
- <span>
- 低调奢华有内涵
- </span>
- </div>
- <div>
- <img src="images/shuaige6.jpg" alt="帅哥6">
- <a href="#">
- 卷福
- </a>
- <span>
- 低调奢华有内涵
- </span>
- </div>
- </li>
- <li>
- <div>
- <img src="images/meinv1.jpg" alt="美女1">
- <a href="#">
- 美女
- </a>
- <span>
- 外猛内柔女汉子
- </span>
- </div>
- <div>
- <img src="images/meinv2.jpg" alt="美女2">
- <a href="#">
- 美女
- </a>
- <span>
- 外猛内柔女汉子
- </span>
- </div>
- <div>
- <img src="images/meinv3.jpg" alt="美女3">
- <a href="#">
- 美女
- </a>
- <span>
- 卖萌嘟嘴剪刀手
- </span>
- </div>
- <div>
- <img src="images/meinv4.jpg" alt="美女4">
- <a href="#">
- 美女
- </a>
- <span>
- 卖萌嘟嘴剪刀手
- </span>
- </div>
- <div>
- <img src="images/meinv5.jpg" alt="美女5">
- <a href="#">
- 美女
- </a>
- <span>
- 时尚亮丽小清新
- </span>
- </div>
- <div>
- <img src="images/meinv6.jpg" alt="美女6">
- <a href="#">
- 美女
- </a>
- <span>
- 时尚亮丽小清新
- </span>
- </div>
- </li>
- <li>
- <div>
- <img src="images/chongwu1.jpg" alt="宠物1">
- <a href="#">
- 宠物
- </a>
- <span>
- 每只666块
- </span>
- </div>
- <div>
- <img src="images/chongwu2.jpeg" alt="宠物2">
- <a href="#">
- 宠物
- </a>
- <span>
- 每只666块
- </span>
- </div>
- <div>
- <img src="images/chongwu3.jpg" alt="宠物3">
- <a href="#">
- 宠物
- </a>
- <span>
- 每只666块
- </span>
- </div>
- <div>
- <img src="images/chongwu4.jpg" alt="宠物4">
- <a href="#">
- 宠物
- </a>
- <span>
- 每只666块
- </span>
- </div>
- <div>
- <img src="images/chongwu5.jpg" alt="宠物5">
- <a href="#">
- 宠物
- </a>
- <span>
- 每只666块
- </span>
- </div>
- <div>
- <img src="images/chongwu6.jpg" alt="宠物6">
- <a href="#">
- 宠物
- </a>
- <span>
- 每只666块
- </span>
- </div>
- </li>
- <li>
- <div>
- <img src="images/yingshi1.jpg" alt="影视1">
- <a href="#">
- 哈利波特系列
- </a>
- <span>
- 经典中的经典
- </span>
- </div>
- <div>
- <img src="images/yingshi2.jpg" alt="影视2">
- <a href="#">
- 三傻大闹宝莱坞
- </a>
- <span>
- 看到泪崩
- </span>
- </div>
- <div>
- <img src="images/yingshi3.jpg" alt="影视3">
- <a href="#">
- 变形金刚系列
- </a>
- <span>
- 过瘾过瘾过瘾
- </span>
- </div>
- <div>
- <img src="images/yingshi4.jpg" alt="影视4">
- <a href="#">
- 千与千寻
- </a>
- <span>
- 梦中的小萝莉那么清新
- </span>
- </div>
- <div>
- <img src="images/yingshi5.jpeg" alt="影视5">
- <a href="#">
- 龙猫
- </a>
- <span>
- 我的龙猫啊啊啊
- </span>
- </div>
- <div>
- <img src="images/yingshi6.jpg" alt="影视6">
- <a href="#">
- 阿甘正传
- </a>
- <span>
- 阿甘还是那个阿甘
- </span>
- </div>
- </li>
- <li>
- <div>
- <img src="images/lol1.jpg" alt="lol1">
- <a href="#">
- 寒冰射手
- </a>
- <span>
- 蛮王他媳妇
- </span>
- </div>
- <div>
- <img src="images/lol2.jpg" alt="lol2">
- <a href="#">
- 黑暗之女
- </a>
- <span>
- 小萝莉一枚
- </span>
- </div>
- <div>
- <img src="images/lol3.jpg" alt="lol3">
- <a href="#">
- 探险家
- </a>
- <span>
- 游戏中我最帅
- </span>
- </div>
- <div>
- <img src="images/lol4.jpg" alt="lol4">
- <a href="#">
- 人马
- </a>
- <span>
- 上单大野全能
- </span>
- </div>
- <div>
- <img src="images/lol5.jpg" alt="lol5">
- <a href="#">
- 提莫提百万
- </a>
- <span>
- 每天死亡百万次。。
- </span>
- </div>
- <div>
- <img src="images/lol6.jpg" alt="lol6">
- <a href="#">
- 狼人
- </a>
- <span>
- 别给我放大
- </span>
- </div>
- </li>
- <li>
- 待开发。。。
- </li>
- </ul>
- </div>
- <script>
- 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>
这段代码的关键处在最后的两个 for 遍历和 this 指针,第一个 for 遍历是为每一个 span 按钮添加点击事件,而第二个 for 遍历是确定当前点击的是哪个按钮,相应的内容部分就很好控制出现和隐藏了;
来源: http://www.jb51.net/article/91526.htm