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 相关文章推荐
在JavaScript中实现命名空间
Nov 23 Javascript
自己的js工具_Form 封装
Aug 21 Javascript
javascript concat数组累加 示例
Sep 03 Javascript
jquery.combobox中文api和例子,修复了上面的小bug
Mar 28 Javascript
jsMind通过鼠标拖拽的方式调整节点位置
Apr 13 Javascript
JavaScript实现Iterator模式实例分析
Jun 09 Javascript
JS+CSS实现类似QQ好友及黑名单效果的树型菜单
Sep 22 Javascript
Bootstrap表单控件使用方法详解
Jan 11 Javascript
详解Vue.js 2.0 如何使用axios
Apr 21 Javascript
JS/jQuery实现DIV延时几秒后消失或显示的方法
Feb 12 jQuery
vue axios请求超时的正确处理方法
Apr 02 Javascript
javaScript实现游戏倒计时功能
Nov 17 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
用Socket发送电子邮件
2006/10/09 PHP
php和js如何通过json互相传递数据相关问题探讨
2013/02/26 PHP
Symfony控制层深入详解
2016/03/17 PHP
yii2中关于加密解密的那些事儿
2018/06/12 PHP
Mootools 1.2教程 事件处理
2009/09/15 Javascript
javascript整除实现代码
2010/11/23 Javascript
文档对象模型DOM通俗讲解
2013/11/01 Javascript
如何将网页表格内容导入excel
2014/02/18 Javascript
javascript获取元素偏移量的方法有哪些
2014/06/24 Javascript
初始Nodejs
2014/11/08 NodeJs
《JavaScript DOM 编程艺术》读书笔记之JavaScript 图片库
2015/01/09 Javascript
javascript中$(function() {});写与不写有哪些区别
2015/08/10 Javascript
JavaScript编写检测用户所使用的浏览器的代码示例
2016/05/05 Javascript
微信小程序 特效菜单抽屉效果实例代码
2017/01/11 Javascript
layer实现关闭弹出层刷新父界面功能详解
2017/11/15 Javascript
详解如何解决Vue和vue-template-compiler版本之间的问题
2018/09/17 Javascript
d3绘制基本的柱形图的实现代码
2018/12/12 Javascript
详解vue.js移动端配置flexible.js及注意事项
2019/04/10 Javascript
解决layer.confirm快速点击会重复触发事件的问题
2019/09/23 Javascript
VUE 动态组件的应用案例分析
2019/12/02 Javascript
VUE实现自身整体组件销毁的示例代码
2020/01/13 Javascript
Vue data的数据响应式到底是如何实现的
2020/02/11 Javascript
js实现碰撞检测
2021/01/29 Javascript
[05:20]卡尔工作室_DOTA2新手教学_DOTA2超强新手功能
2013/04/22 DOTA
python3音乐播放器简单实现代码
2020/04/20 Python
Python3.4编程实现简单抓取爬虫功能示例
2017/09/14 Python
python语音识别实践之百度语音API
2018/08/30 Python
pytorch梯度剪裁方式
2020/02/04 Python
解决keras backend 越跑越慢问题
2020/06/18 Python
html5+css3之制作header实例与更新
2020/12/21 HTML / CSS
HTML5新特性之语义化标签
2017/10/31 HTML / CSS
汽车销售求职自荐信
2013/10/01 职场文书
汽车维修与检测专业应届生求职信
2013/11/12 职场文书
党员群众路线对照检查材料
2014/08/31 职场文书
基层党员对照检查材料
2014/09/24 职场文书
看雷锋电影观后感
2015/06/10 职场文书