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. Set database resumable

    You can use bellow command to make your session resumable. Which means that if your session hit spac ...

  2. centos 如何安装软件

    yum命令 (一)yum基本概念 1)yum是什么 yum = Yellow dog Updater, Modified 主要功能是更方便的添加/删除/更新RPM包. 它能自动解决包的倚赖性问题. 它 ...

  3. Unity3D-碰撞測试

    碰撞測试这个再游戏的开发中是非常有必要的.当敌人的攻击的时候,发生碰撞这时候就会造成一定的伤害,因此我们须要依据受到的伤害对用户的生命值进行控制,因此碰撞的測试是 我们在游戏的开发过程中须要的一种比較 ...

  4. android 线程的开启和停止（借鉴java的技术）

    在onclick()点击事件中的 // 上传地理位置 case R.id.person_up_locat: System.out.println("====输出了.. .. ====&quo ...

  5. LeetCode 500. Keyboard Row （键盘行）

    Given a List of words, return the words that can be typed using letters of alphabet on only one row' ...

  6. AutoLayout初战----Masonry与FDTemplateLayoutCell实践

    学iOS也有几个月了.一直都是纯代码开发,菜鸟入门,到今天还处在Frame时代.刚好近期项目在提审.有点时间能够学学传说中的AutoLayout.事实上.就是android的相对布局(Relative ...

  7. oc74--NSMutableArray

    // // main.m // NSMutableArray ,可变数组 #import <Foundation/Foundation.h> int main(int argc, cons ...

  8. highcharts注意事项

    var json = [ {"id":"1","tagName":"apple"}, {"id":& ...

  9. 【POJ 2777】 Count Color

    [题目链接] http://poj.org/problem?id=2777 [算法] 线段树 [代码] #include <algorithm> #include <bitset&g ...

  10. codeforces educational round 25

    A 出题人不给样例解释...具体程序 #include<bits/stdc++.h> using namespace std; int n; ]; int main() { scanf() ...