<!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. u-boot 的介绍及系统结构

     u-boot 介绍 U­boot 是德国 DENX 小组的开发用于多种嵌入式 CPU 的 bootloader 程序, U­Boot 不仅仅支持嵌入式 Linux 系统的引导,当前,它还支持 Net ...

  2. lds 文件说明

    主要符号说明 OUTPUT_FORMAT(bfdname) 指定输出可执行文件格式. OUTPUT_ARCH(bfdname) 指定输出可执行文件所运行 CPU 平台 ENTRY(symbol) 指定 ...

  3. VSCode 常用setiings.json设置

    { , , "editor.multiCursorModifier": "ctrlCmd", "editor.snippetSuggestions&q ...

  4. 快速创建vuepress项目（使用vuepress写文档）

    vuepress的官方文档:https://vuepress.vuejs.org/zh/guide/ 参考:https://segmentfault.com/a/1190000016333850 ht ...

  5. K8S之部署Dashboard

    转载声明 本文转载自:ASP.NET Core on K8S深入学习(2)部署过程解析与部署Dashboard 1.Yaml安装 下载yaml文件 wget https://raw.githubuse ...

  6. Java 基础 - 比较方式选择（什么类型用equals()比较，什么类型用==比较）

    ref: https://www.cnblogs.com/lori/p/8308671.html 在 java 中进行比较,我们需要根据比较的类型来选择合适的比较方式: 对象域,使用 equals 方 ...

  7. C++调用python(C++)

    C++源代码:python部分就是正常的python代码 #include <string.h> #include <math.h> #include "iostre ...

  8. ELK5.2+kafka+zookeeper+filebeat集群部署

    架构图 考虑到日志系统的可扩展性以及目前的资源(部分功能复用),整个ELK架构如下: 架构解读 : (整个架构从左到右,总共分为5层) 第一层.数据采集层 最左边的是业务服务器集群,上面安装了file ...

  9. MongoDB特性及使用场景

    概述 MongoDB(Humongous Database),中文意思就是巨大无比的数据库,顾名思义,MongoDB就是为处理大数据而生,以解决海量数据的存储和高效查询使用为使命.MongoDB是一款 ...

  10. JQ实现全选、全不选

    代码: <table class="table myTable table-hover"> <thead> <tr> <th> &l ...