<!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 #ccc;

            margin: 100px auto;

            overflow: hidden;

        }

        ul {

            width: 600px;

            height: 40px;

            margin-left: -1px;

            list-style: none;

        }

        li {

            float: left;

            width: 101px;

            height: 40px;

            text-align: center;

            font: 600 18px/40px "simsun";

            background-color: pink;

            cursor: pointer;

        }

        span {

            display: none;

            width: 500px;

            height: 360px;

            background-color: yellow;

            text-align: center;

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

        }

        .show {

            display: block;

        }

        .current {

            background-color: yellow;

        }

    </style>

    <script>

        window.onload = function () {

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

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

                fn(boxArr[i]);

            }

            function fn(ele){

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

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

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

                    liArr[i].index = i;

                    liArr[i].onmouseover = function () {

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

                            liArr[j].className = "";

                            spanArr[j].className = "";

                        }

                        this.className = "current";

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

                    }

                }

            }

        }

    </script>

</head>

<body>

    <div class="box">

        <ul>

            <li class="current">鞋子</li>

            <li>袜子</li>

            <li>帽子</li>

            <li>裤子</li>

            <li>裙子</li>

        </ul>

        <span class="show">鞋子</span>

        <span>袜子</span>

        <span>帽子</span>

        <span>裤子</span>

        <span>裙子</span>

    </div>

    <div class="box">

        <ul>

            <li class="current">鞋子</li>

            <li>袜子</li>

            <li>帽子</li>

            <li>裤子</li>

            <li>裙子</li>

        </ul>

        <span class="show">鞋子</span>

        <span>袜子</span>

        <span>帽子</span>

        <span>裤子</span>

        <span>裙子</span>

    </div>

    <div class="box">

        <ul>

            <li class="current">鞋子</li>

            <li>袜子</li>

            <li>帽子</li>

            <li>裤子</li>

            <li>裙子</li>

        </ul>

        <span class="show">鞋子</span>

        <span>袜子</span>

        <span>帽子</span>

        <span>裤子</span>

        <span>裙子</span>

    </div>

</body>

</html>

tab栏切换效果的更多相关文章

  1. ES6面向对象实现tab栏切换效果

    面向对象实现tab栏切换效果

  2. tab栏切换效果案例

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. js 实现tab栏切换效果

    效果图: 源码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  4. tab栏切换效果运用案例

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. JavaScript--tab栏切换效果

    tab栏切换效果: <!DOCTYPE html> <html> <head lang="en"> <meta charset=" ...

  6. jQuery带有定时器的tab栏切换

    现在网上很多类似选项卡的切换,我们成为tab栏切换,比如下图: 新浪的tab栏切换 淘宝的tab栏切换 其中,新浪的tab栏鼠标放上去,可以快速的来回切换,但是如果采取ajax异步传输,不停去加载服务 ...

  7. tab栏切换

    最简单的tab栏切换 html部分 <ul class="tab"> <li class="item">待支付(1)</li> ...

  8. JS实现 Tab栏切换案例

    要求:当鼠标点击上面相应的选项卡(tab),下面页面的内容也随之而改变. 结构分析: 全部的内容都放到一个大的盒子里面,盒子里面又可以分为上面和下面两个盒子. 上面的盒子放了 5个li,装着5个小的选 ...

  9. dataTable tab栏切换时错位解决办法

    做后台管理类网站肯定要写列表,首选dataTable,功能强大 最近在做一个tab栏切换时发现了一个很诡异的事情:表头错位了! 主要时因为当table被隐藏后,table的header宽度会计算错乱, ...

随机推荐

  1. ES-Mac OS环境搭建(2)

    下载 进入官网,选择downloads进入下载页. 选择elasticsaerch下载. 新的页面中,下拉选择历史版本. 下拉选择elasticsearch和版本,然后点击下载. 选择MACOS/LI ...

  2. Selenium私房菜系列10 -- 我遇到的问题及解决问题的方法

    Selenium私房菜系列10 -- 我遇到的问题及解决问题的方法

  3. C# 一维数组 二位数组 多维数组

    什么是数组? 数组是一组变量,就是把一些变量串在一起,放在一块. 数组的作用? 假设有一堆变量,每个变量都有一些程序,那么这堆程序放在一起  程序就会混乱,处理起来有些麻烦,那么数组就是把这些变量放在 ...

  4. Software Engineer（百赴美）

    http://talent.baidu.com/component1000/corp/baidu/html/BFM.html http://talent.baidu.com/baidu/web/tem ...

  5. 如何删除github上项目的文件

    1. 你要有前面一章的开发平台和github插件,下面就是基于前面来做的. 如何删掉你github上的文件呢?想必你的电脑有一个下载的git工具了,如果还是没有的话,请用npm下载一个git.这是我已 ...

  6. Luogu P4609 [FJOI2016]建筑师&&CF 960G Bandit Blues

    考虑转化题意,我们发现其实就是找一个长度为\(n\)的全排列,使得这个排列有\(A\)个前缀最大值,\(B\)个后缀最大值,求方案数 我们考虑把最大值拎出来单独考虑,同时定义一些数的顺序排列为单调块( ...

  7. 47.Number of Islands（岛的数量）

    Level:   Medium 题目描述: Given a 2d grid map of '1's (land) and '0's (water), count the number of islan ...

  8. 数据库：SQL Server自增长列的编号

    SQL Server表中的自动编号ID重新开始排列 说法一: 有两种方法: 方法1: truncate table 你的表名 --这样不但将数据删除,而且可以重新置位identity属性的字段. 方法 ...

  9. IP数据包的校验和算法

    1.算法思路: IP/ICMP/IGMP/TCP/UDP等协议的校验和算法都是相同的,算法如下: 在发送数据时,为了计算IP数据包的校验和.应该按如下步骤: (1)把IP数据包的校验和字段置为0: ( ...

  10. [JOYOI] 1035 棋盘覆盖

    题目限制 时间限制 内存限制 评测方式 题目来源 1000ms 131072KiB 标准比较器 Local 题目描述 给出一张nn(n<=100)的国际象棋棋盘,其中被删除了一些点,问可以使用多 ...