<!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. VBA中msgbox的用法小结

    1.作用在消息框中显示信息,并等待用户单击按钮,可返回单击的按钮值(比如“确定”或者“取消”).通常用作显示变量值的一种方式.2.语法MsgBox(Prompt[,Buttons][,Title][, ...

  2. android 自定义shape 带阴影边框效果

    在drawable 里面 建立一个 xml 直接复制 看效果 自己调试就可以 <?xml version="1.0" encoding="utf-8"?& ...

  3. JS 实现省市联动

    使用 JavaScript 实现选择省份,后面联动改变成相应省份下的市 原理很简单: 首先创建两个select下拉框(省.市) 初始化的时候让省都显示出来,市为空  ................. ...

  4. 关于 第三方接口支付的时候 采用post提交的方式，有两种 一种是通过 curl来进行，一种是通过js当页面加载完后跳转

    这是第一种.通过javascript页面加载完后,对表单采用 post方式提交给 第三方接口----- echo <<<_END<!DOCTYPE html PUBLIC &q ...

  5. [转]Ubuntu安装rabbitMq

    笔者ubuntu版本为Ubuntu 15.10,查看ubuntu当前版本命令:cat /etc/issue. 由于rabbitMq需要erlang语言的支持,在安装rabbitMq之前需要安装erla ...

  6. leetcode-157周赛-5215黄金矿工

    题目描述: 方法一:dfs class Solution: def getMaximumGold(self, grid: List[List[int]]) -> int: maxx = 0 R, ...

  7. leetcode-210-课程表②

    题目描述: 第一次提交: class Solution: def findOrder(self, numCourses: int, prerequisites: List[List[int]]) -& ...

  8. 校园商铺-2项目设计和框架搭建-9验证Service

    1. 新建接口 main: com.csj2018.o2o.service/AreaService.java package com.csj2018.o2o.service; import java. ...

  9. skyline中大数据量的三维场景刷新速度问题

    我们做了一个的类似于TE Pro的桌面系统来代替TE Pro演示我们的大三维场景.我们的三维场景包括100平方公里的全要素场景,有建筑物,地面.小品.部件.植被等.在系统运行后,三维场景刷不起来,速 ...

  10. 用pymysql实现的注册登录公告练习

    import pymysql #1.连接服务器 conn=pymysql.connect( host='127.0.0.1', port=3306, user='root', password='12 ...