<!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. ransformResourcesWithMergeJavaResForDebug问题

    错误内容: Error:Execution failed for task ':app:transformResourcesWithMergeJavaResForDebug'. > java.i ...

  2. Monkey 稳定性测试

    学习网址: https://blog.csdn.net/lucytan01/article/details/79958727 https://blog.csdn.net/hebbely/article ...

  3. Java怎样获取字符串最后出现的位置

    lastIndexOf();表示获取字符串最后出现的位置,倒数的位置 @Test /** * lastIndexOf();//获取字符串最后出现的位置,倒数的位置 * */ public void f ...

  4. 【BZOJ2298】【luoguP2519】problem a

    description 一次考试共有n个人参加,第i个人说:"有ai个人分数比我高,bi个人分数比我低."问最少有几个人没有说真话(可能有相同的分数) analysis 这题转化模 ...

  5. RocketMQ源码分析之RocketMQ事务消息实现原下篇(事务提交或回滚)

    摘要: 事务消息提交或回滚的实现原理就是根据commitlogOffset找到消息,如果是提交动作,就恢复原消息的主题与队列,再次存入commitlog文件进而转到消息消费队列,供消费者消费,然后将原 ...

  6. 0918CSP-S模拟测试赛后总结

    14名.110分.可以算是几次大落之后的一次小小的崛起?? 然而sdfz的开挂选手AK了啊…… T2重测前rank7我就高兴地像个傻子??也不看看这次T1是个什么题. 实力还是不行.一眼秒掉了简单题, ...

  7. 模拟求root——cf1067B

    注意最后一轮要单独求一下 且最后只能有一个root #include <bits/stdc++.h> using namespace std; #define MOD 1000000007 ...

  8. flink提交文件出现java.io.IOException:unable to close file because the last block does not have enough number of replicas异常

    当提交已经打包好的jar包时候,控制台出现以下的错误.

  9. 20175323《Java程序设计》第四周学习总结

    教材学习内容总结 我用幕布记录学习过程和思路,下面是我这章的知识框架总结https://mubu.com/doc/ffMhY6FVc0 教材学习中的问题和解决过程 问题1:教材121页的例六Examp ...

  10. ICPC 2018 徐州赛区网络赛

    ACM-ICPC 2018 徐州赛区网络赛  去年博客记录过这场比赛经历:该死的水题  一年过去了,不被水题卡了,但难题也没多做几道.水平微微有点长进.     D. Easy Math 题意:   ...