<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        body{font-family: "Microsoft YaHei",serif;}

        body,dl,dd,p,h1,h2,h3,h4,h5,h6{margin: 0;}

        ol,ul,li{margin: 0;padding: 0;list-style: none;}

        img{border: none}

        #wrap{

            margin: 50px auto;

            width: 820px;

            height: 390px;

            user-select: none;

        }

        #img{

            position: relative;

            width: 100%;

            height: 340px;

        }

        #img ul{

            width: 100%;

            height: 100%;

        }

        #img li{

            display: none;

            position: absolute;

            top: 0;

            left: 0;

            width: 100%;

            height: 100%;

        }

        #img li.show{

            display: block;

        }

        #tab{

            overflow: hidden;

            width: 100%;

            height: 50px;

        }

        #tab ul{

            width: 200%;

            height: 100%;

        }

        #tab li{

            float: left;

            width: 10%;

            height: 50px;

            line-height: 50px;

            text-align: center;

            background-color: #000;

            font-size: 12px;

            color: #eeeeee;

            cursor: pointer;

        }

        #tab li.active{

            background-color: #303030;

            color: #e9c06c;

        }

    </style>

</head>

<body>

<div id="wrap">

    <div id="img">

        <ul>

            <li class="show"><a href=""><img src="../14作业案例/img/1.jpg" alt=""></a></li>

            <li><a href=""><img src="../14作业案例/img/2.jpg" alt=""></a></li>

            <li><a href=""><img src="../14作业案例/img/3.jpg" alt=""></a></li>

            <li><a href=""><img src="../14作业案例/img/4.jpg" alt=""></a></li>

            <li><a href=""><img src="../14作业案例/img/5.jpg" alt=""></a></li>

        </ul>

    </div>

    <div id="tab">

        <ul>

            <li class="active">qwer</li>

            <li>qwer</li>

            <li>qwer</li>

            <li>qwer</li>

            <li>qwer</li>

        </ul>

    </div>

</div>

<script>

    var aTabLi = document.querySelectorAll('#tab ul li'),

        aImgLi = document.querySelectorAll('#img ul li');

    var goudan = 0;//定义变量，用来表示当前显示的是哪张图片

    // 给Tab对应的li添加点击事件

    // 这里的var就是一个定值

    // 就像在for外边let一样

    for (var i=0,len = aTabLi.length;i<len;i++){

        aTabLi[i].index = i;

        //自己给添加一个自定义index的属性

        aTabLi[i].onclick = function () {

            var i = this.index;

            //用this使用aTabLi的index属性给i赋值

            // 当使用var定义i的时候，没法再点击事件界面访问到i值，直接就是结果

            if (goudan!==i){

                //

                aTabLi[goudan].className = "";

                aImgLi[goudan].className = "";

                // 当前点击的tab样式添加

                aTabLi[i].className = "active";

                aImgLi[i].className = "show";

                //当前显示的图片序号变更

                goudan = i;

            }

        };

    }

</script>

</body>

</html>

11-6-es5选项卡的更多相关文章

  1. Oracle基础知识（一）、简介与安装

    文章提纲 Oracle简介与发展历程 安装实例(面向普通开发者) 一.Oracle简介与发展历程 中文名称甲骨文公司,全称为甲骨文股份有限公司(甲骨文软件系统有限公司).甲骨文已超越 IBM ,成为继 ...

  2. 使用好压（HaoZip）软件打包EverEdit制作安装程序

    最近使用EverEdit,使用原始的安装程序安装后,需要重新安装插件,对配置文件进行了修改,定制了工具栏.将安装后的程序目录进行打包,制作新的安装包,便于携带. 以下为打包制作过程: 打包原料:Eve ...

  3. 3.精通前端系列技术之深入学习Jquery(一)

    使用Jquery的好处: •简化JS的复杂操作 •不再需要关心兼容性(原生js获取元素样式.事件需要做兼容性) •提供大量实用方法 1.选择网页元素 <!DOCTYPE html PUBLIC ...

  4. 抓包工具 - Fiddler（详细介绍）

    Fiddler的详细介绍 一.Fiddler与其他抓包工具的区别 1.Firebug虽然可以抓包,但是对于分析http请求的详细信息,不够强大.模拟http请求的功能也不够,且firebug常常是需要 ...

  5. JS-1

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. ES6入门——类的概念

    1.Class的基本用法 概述 JavaScript语言的传统方式是通过构造函数,定义并生成新对象.这种写法和传统的面向对象语言差异很大,下面是一个例子: function Point(x, y) { ...

  7. 面向英特尔® x86 平台的 Unity* 优化指南： 第 1 部分

    原文地址 目录 工具 Unity 分析器 GPA 系统分析器 GPA 帧分析器 如要充分发挥 x86 平台的作用,您可以在项目中进行多种性能优化,以最大限度地提升性能. 在本指南中,我们将展示 Uni ...

  8. Fiddler抓包工具详细介绍

    本文转自:http://www.cnblogs.com/Chilam007/p/6985379.html 一.Fiddler与其他抓包工具的区别 1.Firebug虽然可以抓包,但是对于分析http请 ...

  9. fiddler使用介绍

    Fiddler的详细介绍 Fiddler的详细介绍 一.Fiddler与其他抓包工具的区别 1.Firebug虽然可以抓包,但是对于分析http请求的详细信息,不够强大.模拟http请求的功能也不够, ...

  10. Fiddler的详细介绍

    Fiddler的详细介绍 一.Fiddler与其他抓包工具的区别 1.Firebug虽然可以抓包,但是对于分析http请求的详细信息,不够强大.模拟http请求的功能也不够,且firebug常常是需要 ...

随机推荐

  1. python中logging使用方法

    1.logging提供了一组便利的函数,用来做简单的日志.它们是 debug(). info(). warning(). error() 和 critical(). 1.1logging以严重程度递增 ...

  2. apache 80 端口 反向代理 tomcat 8080端口

    最近有个jsp的项目要放到服务上,但服务器上已经有了XAMPP(apache + mysql + php), 已占用了80端口.但http默认是访问80端口的. 先把tomcat 环境搭建起来, 发现 ...

  3. java运行字符串代码

    本文链接:https://blog.csdn.net/junlong750/article/details/50945883

  4. java_缓冲流(字节输出流)

    缓冲流分为: 字节缓冲流:BufferedIntputSream(字节缓冲输出流),BufferdOutputStream(字节缓冲输入流) 字符缓冲流:BufferedReader(字符输入缓冲流) ...

  5. 注解@Qualifier@Primary

    在Controller中需要注入service那么我的这个server有两个实现类如何区分开这两个impl呢 根据注入资源的注解不同实现的方式有一点小小的区别 在Controller中使用 @Auto ...

  6. CVE-2016-0095提权漏洞分析

    1 前言 瞻仰了k0shl和鹏哥 的漏洞分析,感慨万千,任重而道远. 2 系统环境和工具 windows 7 32旗舰版 windbg 3 poc 3.1poc复现 首先k0shl大佬给出的poc() ...

  7. hdu5952 Counting Cliques 技巧dfs

    题意:一个有N个点M条边的图,球其中由S个点构成的团的个数.一个团是一个完全子图. 没有什么好办法,只有暴力深搜,但是这里有一个神奇的操作:将无向图转为有向图:当两个点编号u<v时才有边u-&g ...

  8. Python全栈开发：XML与parse对比

    #!/usr/bin/env python # -*- coding;utf-8 -*- """ ET.XML和ET.parse的对比 1.返回对象差异: ET.XML: ...

  9. [笔记]180612 for DevOps

    adb devices 识别不了安卓手机:我下的adb interface驱动下载链接:如果设备管理器中ADB Interface是黄色的,就需要先安装adb interface驱动(BD:adb i ...

  10. layui相关用法总结

    1.关闭当前弹出层 parent.layer.close(parent.layer.getFrameIndex(window.name));