很棒的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 相关文章推荐
点击进行复制的JS代码实例
Aug 23 Javascript
JavaScript中的Truthy和Falsy介绍
Jan 01 Javascript
异步JavaScript编程中的Promise使用方法
Jul 28 Javascript
Chrome不支持showModalDialog模态对话框和无法返回returnValue问题的解决方法
Oct 30 Javascript
Vue方法与事件处理器详解
Dec 01 Javascript
vue自定义移动端touch事件之点击、滑动、长按事件
Jul 10 Javascript
vue form 表单提交后刷新页面的方法
Sep 04 Javascript
JavaScript中十种一步拷贝数组的方法实例详解
Apr 22 Javascript
Vue函数式组件的应用实例详解
Aug 30 Javascript
Vuex实现数据共享的方法
Dec 20 Javascript
vue列表数据发生变化指令没有更新问题及解决方法
Jan 16 Javascript
Vue中inheritAttrs的使用实例详解
Dec 31 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实现的生成静态HTML速度快类库
2007/03/31 PHP
PHP中的函数嵌套层数限制分析
2011/06/13 PHP
国外PHP程序员的13个好习惯小结
2012/02/20 PHP
redis 队列操作的例子(php)
2012/04/12 PHP
PHP实现根据浏览器跳转不同语言页面代码
2013/08/02 PHP
PHP基于自定义函数生成笛卡尔积的方法示例
2017/09/30 PHP
AJAX 网页保留浏览器前进后退等功能
2011/02/12 Javascript
js获取select选中的option的text示例代码
2013/12/19 Javascript
js与jQuery 获取父窗、子窗的iframe
2013/12/20 Javascript
jQuery Validate 验证,校验规则写在控件中的具体实例
2014/02/27 Javascript
深入浅析JavaScript中的scrollTop
2016/07/11 Javascript
获取JS中网页各种高宽与位置的方法总结
2016/07/27 Javascript
Bootstrap多级菜单的实现代码
2017/05/23 Javascript
vue-router判断页面未登录自动跳转到登录页的方法示例
2018/11/04 Javascript
vue-router重定向和路由别名的使用讲解
2019/01/19 Javascript
详解javascript中的Error对象
2019/04/25 Javascript
Node 代理访问的实现
2019/09/19 Javascript
在vue中利用全局路由钩子给url统一添加公共参数的例子
2019/11/01 Javascript
[38:51]2014 DOTA2国际邀请赛中国区预选赛 Orenda VS LGD-CDEC
2014/05/22 DOTA
使用PyV8在Python爬虫中执行js代码
2017/02/16 Python
PyCharm代码整体缩进,反向缩进的方法
2018/06/25 Python
在Pandas中给多层索引降级的方法
2018/11/16 Python
python画双y轴图像的示例代码
2019/07/07 Python
使用python创建Excel工作簿及工作表过程图解
2020/05/27 Python
matplotlib 画动态图以及plt.ion()和plt.ioff()的使用详解
2021/01/05 Python
波比布朗英国官网:Bobbi Brown英国
2017/11/13 全球购物
美国地毯购买网站:Rugs USA
2019/02/23 全球购物
日本必酷网络直营店:Biccamera
2019/03/23 全球购物
高级技校毕业生自荐信
2013/11/18 职场文书
学校卫生检查制度
2014/02/03 职场文书
投标承诺书范本
2014/03/27 职场文书
党的群众路线教育实践活动个人剖析材料
2014/10/07 职场文书
2014个人年度工作总结
2014/12/15 职场文书
中学教师个人总结
2015/02/10 职场文书
指导教师推荐意见
2015/06/05 职场文书
MySQL窗口函数的具体使用
2021/11/17 MySQL