js中常用的Tab切换效果(推荐)


Posted in Javascript onAugust 30, 2016

如下所示:

<!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遍历是确定当前点击的是哪个按钮,相应的内容部分就很好控制出现和隐藏了。

以上这篇js中常用的Tab切换效果(推荐)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS函数实现动态添加CSS样式表文件
Dec 15 Javascript
Windows8下搭建Node.js开发环境教程
Sep 03 Javascript
JS实现文字向下滚动完整实例
Feb 06 Javascript
js实现鼠标滚轮控制图片缩放效果的方法
Feb 20 Javascript
JS中处理时间之setUTCMinutes()方法的使用
Jun 12 Javascript
JavaScript实现select添加option
Jul 03 Javascript
jquery遍历函数siblings()用法实例
Dec 24 Javascript
前端性能优化及技巧
May 06 Javascript
Javascript的无new构建实例详解
May 15 Javascript
bootstrap datetimepicker实现秒钟选择下拉框
Jan 05 Javascript
Vue+jquery实现表格指定列的文字收缩的示例代码
Jan 09 jQuery
three.js显示中文字体与tween应用详析
Jan 04 Javascript
基于cssSlidy.js插件实现响应式手机图片轮播效果
Aug 30 #Javascript
JavaScript探测CSS动画是否已经完成的方法
Aug 30 #Javascript
基于JavaScript实现鼠标箭头移动图片跟着移动
Aug 30 #Javascript
很棒的js Tab选项卡切换效果
Aug 30 #Javascript
js改变透明度实现轮播图的算法
Aug 24 #Javascript
标准的js无缝滚动效果
Aug 30 #Javascript
js实现按钮控制带有停顿效果的图片滚动
Aug 30 #Javascript
You might like
漂亮但不安全的CTB
2006/10/09 PHP
php下使用以下代码连接并测试
2008/04/09 PHP
php xml留言板 xml存储数据的简单例子
2009/08/24 PHP
比较全面的PHP数组的使用方法小结
2010/09/23 PHP
PHP禁止页面缓存的代码
2011/10/23 PHP
phpphp图片采集后按原路径保存图片示例
2014/02/18 PHP
Thinkphp使用mongodb数据库实现多条件查询方法
2014/06/26 PHP
php实现插入数组但不影响原有顺序的方法
2015/03/27 PHP
php准确计算复活节日期的方法
2015/04/18 PHP
PHP中CheckBox多选框上传失败的代码写法
2017/02/13 PHP
php删除一个路径下的所有文件夹和文件的方法
2018/02/07 PHP
Laravel中正确地返回HTTP状态码方法示例
2019/09/10 PHP
Js日期选择器并自动加入到输入框中示例代码
2013/08/02 Javascript
获得Javascript对象属性个数的示例代码
2013/11/21 Javascript
JS+CSS 制作的超级简单的下拉菜单附图
2013/11/22 Javascript
jquery实现拖动效果
2016/08/10 Javascript
基于JS实现类似支付宝支付密码输入框
2016/09/02 Javascript
前端分页功能的实现以及原理(jQuery)
2017/01/22 Javascript
vantUI 获得piker选中值的自定义ID操作
2020/11/04 Javascript
vue实现两个区域滚动条同步滚动
2020/12/13 Vue.js
轻松掌握python设计模式之策略模式
2016/11/18 Python
Python自动化开发学习之三级菜单制作
2017/07/14 Python
python 读取txt中每行数据,并且保存到excel中的实例
2018/04/29 Python
Python面向对象类继承和组合实例分析
2018/05/28 Python
python实现AES加密和解密
2019/03/27 Python
详解使用Python下载文件的几种方法
2019/10/13 Python
python实现与redis交互操作详解
2020/04/21 Python
Keras中的两种模型:Sequential和Model用法
2020/06/27 Python
使用HTML5中的contentEditable来将多行文本自动增高
2016/03/01 HTML / CSS
软件缺陷的分类都有哪些
2014/08/22 面试题
采购主管岗位职责
2014/02/01 职场文书
军训教官感言
2014/03/02 职场文书
三严三实对照检查材料范文
2014/09/23 职场文书
村支部书记群众路线对照检查材料思想汇报
2014/10/08 职场文书
六年级作文之预言作文
2019/10/25 职场文书
MySQL数字类型自增的坑
2021/05/07 MySQL