很棒的js Tab选项卡切换效果


Posted in Javascript onAugust 30, 2016

本文实例为大家分享了js Tab选项卡切换效果,供大家参考,具体内容如下

<!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>狂拽炫酷?耪ㄌ?lt;/span></div>
     <div><img src="images/shuaige2.jpg" alt="帅哥2"><a href="#">杰森·史坦森</a><span>狂拽炫酷?耪ㄌ?lt;/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遍历是确定当前点击的是哪个按钮,相应的内容部分就很好控制出现和隐藏了;

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery实现预览提交的表单代码分享
May 21 Javascript
JS实现带有抽屉效果的产品类网站多级导航菜单代码
Sep 15 Javascript
浏览器兼容的JS写法总结
Apr 27 Javascript
JavaScript简单获取页面图片原始尺寸的方法
Jun 21 Javascript
微信小程序 登录的简单实现
Apr 19 Javascript
Vue的百度地图插件尝试使用
Sep 06 Javascript
webstorm和.vue中es6语法报错的解决方法
May 08 Javascript
JavaScript遍历DOM元素的常见方式示例
Feb 16 Javascript
jquery 验证用户名是否重复代码实例
May 14 jQuery
javascript获取select值的方法完整实例
Jun 20 Javascript
vue $set 给数据赋值的实例
Nov 09 Javascript
Vue的过滤器你真了解吗
Feb 24 Vue.js
js改变透明度实现轮播图的算法
Aug 24 #Javascript
标准的js无缝滚动效果
Aug 30 #Javascript
js实现按钮控制带有停顿效果的图片滚动
Aug 30 #Javascript
js制作网站首页图片轮播特效代码
Aug 30 #Javascript
js实现简单的碰壁反弹效果
Aug 30 #Javascript
js控住DOM实现发布微博效果
Aug 30 #Javascript
AngularJS动态生成div的ID源码解析
Aug 29 #Javascript
You might like
PHP脚本的10个技巧(2)
2006/10/09 PHP
用php获取远程图片并把它保存到本地的代码
2008/04/07 PHP
PHP防止图片盗用(盗链)的方法小结
2016/11/11 PHP
自适应高度框架 ----属个人收藏内容
2007/01/22 Javascript
Javascript 解疑
2009/11/11 Javascript
javaScript checkbox 全选/反选及批量删除
2010/04/28 Javascript
Javascript的数组与字典用法与遍历对象的属性技巧
2012/11/07 Javascript
JQuery设置和去除disabled属性的5种方法总结
2013/05/16 Javascript
js 三级关联菜单效果实例
2013/08/13 Javascript
通过js获取div的background-image属性
2013/10/15 Javascript
java和javascript获取word文档的书签位置对比
2014/06/19 Javascript
PHP使用方法重载实现动态创建属性的get和set方法
2014/11/17 Javascript
JavaScript程序中实现继承特性的方式总结
2016/06/24 Javascript
表单中单选框添加选项和移除选项
2016/07/04 Javascript
使用原生的javascript来实现轮播图
2017/02/24 Javascript
jQuery实现的老虎机跑动效果示例
2018/12/29 jQuery
JS实现的冒泡排序,快速排序,插入排序算法示例
2019/03/02 Javascript
[02:45]2016年中国刀塔全程回顾,完美“圣”典即将上演
2016/12/15 DOTA
深入分析python中整型不会溢出问题
2018/06/18 Python
使用Python正则表达式操作文本数据的方法
2019/05/14 Python
python深copy和浅copy区别对比解析
2019/12/26 Python
解决windows下python3使用multiprocessing.Pool出现的问题
2020/04/08 Python
使用Python将Exception异常错误堆栈信息写入日志文件
2020/04/08 Python
python对execl 处理操作代码
2020/06/22 Python
python 利用toapi库自动生成api
2020/10/19 Python
详解win10下pytorch-gpu安装以及CUDA详细安装过程
2021/01/28 Python
Farfetch巴西官网:奢侈品牌时尚购物平台
2020/10/19 全球购物
你所在的项目是如何确定版本号的
2015/12/28 面试题
DOM和JQuery对象有什么区别
2016/11/11 面试题
学校安全检查制度
2014/01/27 职场文书
机电专业毕业生求职信
2014/07/01 职场文书
农业项目建议书
2014/08/25 职场文书
迟到检讨书2000字(精选篇)
2014/10/07 职场文书
2015年南京大屠杀纪念日活动总结
2015/03/24 职场文书
上帝也疯狂观后感
2015/06/09 职场文书
html原生table实现合并单元格以及合并表头的示例代码
2023/05/07 HTML / CSS