<!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. 常用的JS方法(见到好的就添加进来)

    // 悬浮置顶 ; (function ($) { $.fn.crumbsFixedPosition = function (options) { var defaults = { cName: 'f ...

  2. linq语句，常用的查询，模糊查询，实体查询

    查询: //List是要查询的实体列表的集合 List.FindAll(n => n.NAME == NAME),    //NAME变量是要查询的条件 模糊查询 List.FindAll(s ...

  3. Vultr IP被墙该怎么办

    我们创建好Vultr服务器时候,首先需要检测IP地址是否可用,很多IP在国内被墙,导致使用Xshell连接不上,虽然IP能够ping通,但是SSH依然连接不上.那Vultr IP被墙该怎么办呢? 方法 ...

  4. sql (4) key and Join

    新建表: "Persons" 表:Id_P LastName FirstName Address City1 Adams John Oxford Street London2 Bu ...

  5. leetcood学习笔记-38-报数

    ---恢复内容开始--- 题目描述: 第一次提交: class Solution: def countAndSay(self, n: int) -> str: f = " for i ...

  6. gevent实现并发

    #_author:来童星#date:2019/12/12import geventimport timedef func1(): print('\033[31;1mfun1 starting...\0 ...

  7. MFC打开/保存文件对话框:CFileDialog

    MFC打开/保存文件对话框:CFileDialog CFileDialog   文件选择对话框的使用:首先构造一个对象并提供相应的参数,构造函数原型如下: CFileDialog::CFileDial ...

  8. 双线程DP

    1.传纸条 好像是一道普及组水题? //Twenty #include<cstdio> #include<iostream> #include<cstring> # ...

  9. STM32 解析futaba S-bus协议

    S-bus为futaba使用的串行通信协议.实际上为串口通信.但是有几点需要注意: 在大端小端上,网上资料都说的不是很清楚: 跟TTL串口信号相比,S-bus的逻辑电平是反的,需用如下电路对电平反相, ...

  10. SpringBoot--Thymeleaf入门使用

    一.概述 今天学习到了SpringBoot中的WEB开发,SpringBoot提供了spring-boot-stater-web为web开发给予支持,它里面内嵌了以下依赖: <dependenc ...