1、为li标签添加index属性，这个属性正好就是span标签数组的index值

2、函数封装适合页面有多个tab切换，需要注意的在获取的li标签和span标签对象时，必须将对应div对象作为参数传入

li标签添加index属性

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        * {

            padding: 0;

            margin: 0;

        }

        .box1 {

            width: 500px;

            height: 400px;

            border: 1px solid #b6ff00;

            overflow: hidden;

            margin: 100px auto;

        }

        ul {

            width: 510px;

            height: 40px;

            list-style: none;

        }

        li {

            float: left;

            width: 101px;

            height: 40px;

            text-align: center;

            font: 400 15px/40px "simsun";

            background-color: beige;

            cursor: pointer;

        }

        span {

            display: none;

            width: 500px;

            height: 360px;

            background-color: #ffd800;

            text-align: center;

            font: 700 150px/360px "simsun";

        }

        .current {

            background-color: #ffd800;

        }

        .show {

            display: block;

        }

    </style>

</head>

<body>

    <div class="box1">

        <ul>

            <li>鞋子</li>

            <li>上衣</li>

            <li>下装</li>

            <li>棉衣</li>

            <li>夏装</li>

        </ul>

        <span>鞋子</span>

        <span>上衣</span>

        <span>下装</span>

        <span>棉衣</span>

        <span>夏装</span>

    </div>

    <script>

        var lis = document.getElementsByTagName("li");

        var sps = document.getElementsByTagName("span");

        for (var i = 0; i < lis.length; i++) {

            lis[i].index = i;

            lis[i].onmouseover = function () {

                for (var j = 0; j < lis.length; j++) {

                    lis[j].className = "";

                    sps[j].className = "";

                }

                this.className = "current";

                sps[this.index].className = "show";

            }

        }

    </script>

</body>

</html>

函数封装版本

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        * {

            padding: 0;

            margin: 0;

        }

        .box {

            width: 500px;

            height: 400px;

            border: 1px solid #b6ff00;

            overflow: hidden;

            margin: 100px auto;

        }

        ul {

            width: 510px;

            height: 40px;

            list-style: none;

        }

        li {

            float: left;

            width: 101px;

            height: 40px;

            text-align: center;

            font: 400 15px/40px "simsun";

            background-color: beige;

            cursor: pointer;

        }

        span {

            display: none;

            width: 500px;

            height: 360px;

            background-color: #ffd800;

            text-align: center;

            font: 700 150px/360px "simsun";

        }

        .current {

            background-color: #ffd800;

        }

        .show {

            display: block;

        }

    </style>

</head>

<body>

    <div class="box">

        <ul>

            <li>鞋子</li>

            <li>上衣</li>

            <li>下装</li>

            <li>棉衣</li>

            <li>夏装</li>

        </ul>

        <span>鞋子</span>

        <span>上衣</span>

        <span>下装</span>

        <span>棉衣</span>

        <span>夏装</span>

    </div>

    <div class="box">

        <ul>

            <li>鞋子</li>

            <li>上衣</li>

            <li>下装</li>

            <li>棉衣</li>

            <li>夏装</li>

        </ul>

        <span>鞋子</span>

        <span>上衣</span>

        <span>下装</span>

        <span>棉衣</span>

        <span>夏装</span>

    </div>

    <div class="box">

        <ul>

            <li>鞋子</li>

            <li>上衣</li>

            <li>下装</li>

            <li>棉衣</li>

            <li>夏装</li>

        </ul>

        <span>鞋子</span>

        <span>上衣</span>

        <span>下装</span>

        <span>棉衣</span>

        <span>夏装</span>

    </div>

    <script>

        var boxs = document.getElementsByClassName("box");

        for (var i = 0; i < boxs.length; i++) {

            tabSwitch(boxs[i]);

        }

        function tabSwitch(ele) {

            var lis = ele.getElementsByTagName("li");

            var sps = ele.getElementsByTagName("span");

            for (var i = 0; i < lis.length; i++) {

                lis[i].index = i;

                lis[i].onmouseover = function () {

                    for (var j = 0; j < lis.length; j++) {

                        lis[j].className = "";

                        sps[j].className = "";

                    }

                    this.className = "current";

                    sps[this.index].className = "show";

                }

            }

        }

    </script>

</body>

</html>

JS——tab函数封装的更多相关文章

  1. JS 抖动函数封装

    原生JS实现封装的抖动函数框架 <style> ul{ margin-top: 100px; } li { float: left; margin-left: 20px; position ...

  2. js 时间函数封装

    html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  3. 兼容主流浏览器的js原生函数封装

    1.获取和修改垂直滚动条的滚动距离 //获取滚动条滚动距离function getScrollTop(){ var fromTop=document.documentElement.scrollTop ...

  4. js getByClass函数封装

    function getByClass(oParent, sClass) { var aEle=oParent.getElementsByTagName('*'); var aResult=[]; v ...

  5. js继承函数封装

    function extend(subClass,superClass) { //初始化一个中间空对象,为了转换主父类关系 var F = function() {}; F.prototype = s ...

  6. 前端总结·基础篇·JS（三）arguments、callee、call、apply、bind及函数封装和构造函数

    前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 前端总结·基础篇·JS(一)原型.原型链.构造函数和字符串(String) 前 ...

  7. JS中深浅拷贝 函数封装代码

    一.了解 基本数据类型保存在栈内存中,按值访问,引用数据类型保存在堆内存中,按址访问. 二.浅拷贝 浅拷贝只是复制了指向某个对象的指针,而不是复制对象本身,新旧对象其实是同一内存地址的数据,修改其中一 ...

  8. react request.js 函数封装

    1.request.js  函数封装 import { Toast } from 'antd-mobile'; import axios from 'axios'; import store from ...

  9. js cookie创建读取删除函数封装

    js cookie创建读取删除函数封装 一.总结 都是为了方便操作,这样弄了很方便 1.创建cookie的函数封装的作用:方便设置过期时间expire,方便设置键和值 2.查询cookie的数据封装的 ...

随机推荐

  1. 【6572】关于mtk平台display模块的学习探讨

    现在在学习mtk的display subsystem,有遇到流程上不太清楚地地方想要询问: 1.cmd模式和video模式framebuffer如何更新, 以及两种模式的差异? cmd和video m ...

  2. js 发布订阅模式

    //发布订阅模式 class EventEmiter{ constructor(){ //维护一个对象 this._events={ } } on(eventName,callback){ if( t ...

  3. javamail中的 javax.mail.AuthenticationFailedException: failed to connect的解决

    在163邮箱中开启POP3和SMTP服务,并设置客户端授权密码,用该密码登录.而不是用户的密码.

  4. 最小生成树 E - QS Network

    Sunny Cup 2003 - Preliminary Round April 20th, 12:00 - 17:00 Problem E: QS Network In the planet w-5 ...

  5. CSS filter 模拟黑洞照片效果

    今天被世界上第一张黑洞照片刷屏. 一整天,哪里都是这张照片.看的多了.我就想用css做一个吧. 建议在chrome上查看. 访问地址:http://suohb.com/work/blankHole.h ...

  6. [JavaEE] Bootstrapping a JavaEE Application

    To bootsrap the application use the following Maven archetype: mvn -DarchetypeGroupId=org.codehaus.m ...

  7. Solid Edge如何快速装配，如何截取组装关系式

    我们点击装配体的任意零件,下方将显示他的装配关系,由于一些零件的装配关系是固定的,比如螺栓,肯定要做一个面贴和,再做一个同轴,所以我们可以保存这些固有的步骤,不用再每次挨个点击这些装配关系.   点击 ...

  8. hive学习笔记-表操作

    Hive数据类型 基本数据类型 tinyint,smallint,int,biging,float,double,decimal,char,varchar,string,binary,boolean, ...

  9. TensorFlow 官方文档中文版

    http://wiki.jikexueyuan.com/list/deep-learning/ TensorFlow 官方文档中文版 你正在阅读的项目可能会比 Android 系统更加深远地影响着世界 ...

  10. STM32跑马灯

    #include "stm32f10x.h" #include "led.h" #include "delay.h" #include &q ...