<!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. JavaScript之执行环境及作用域

        执行环境定义了变量或函数有权访问的其他数据,决定了它们各自的行为.每个执行环境都有一个与之关联的变量对象,环境中定义的所有变量和函数都保存在这个对象中.我们编写的代码是无法访问这个对象的,但解 ...

  2. mac配置android开发环境（一）

    MAC配置ADB环境变量 android环境搭建完成之后需要配置android环境变量,这对以后的运行调试很有帮助. 下面我将一下mac环境下的配置步骤: 1.在本地目录(home directory ...

  3. ListView与ScrollView冲突的4种解决方案

    问题解决方案1.手动设置ListView高度    经过测试发现,在xml中直接指定ListView的高度,是可以解决这个问题的,但是ListView中的数据是可变的,实际高度还需要实际测量.于是手动 ...

  4. iOS：让UIView覆盖导航栏

    当我们想做一个弹出式菜单时,想将导航栏也一起盖住不显示的话,可以用如下语句实现: UIView* myView = /* 你自定义的view */; UIWindow* currentWindow = ...

  5. winform中显示标题，点击打开链接

    效果:显示的是标题,但是点击打开的是链接 思路:定义一个类,将类实例化,向类中写入数据,再将类放到listbox中,设置listbox的显示分类为文本 前台:放入一个listbox控件 后台: pub ...

  6. 微软爆料新型系统，Windows7，Windows10强势来袭

    本系统是10月5日最新完整版本的Windows10 安装版镜像,win10正式版,更新了重要补丁,提升应用加载速度,微软和百度今天宣布达成合作,百度成为win10 Edge浏览器中国默认主页和搜索引擎 ...

  7. python代理检测

    import socket,threading,os,sys,queue,re socket.setdefaulttimeout(5) path=sys.path[0] if os.path.isfi ...

  8. Web项目之Django实战问题剖析

    基于AdminLTE-master模板的后台管理系统 左侧菜单栏的二级标签设计 面包屑 Django文件上传 后台管理系统CRM项目设计流程分析

  9. ubuntu 升级到5.1kernel，打开bbr

    apt-get -f install wget -c https://kernel.ubuntu.com/~kernel-ppa/mainline/v5.1/linux-headers-5.1.0-0 ...

  10. Python 入门基础

    第一章 计算机基础 1.1 硬件 CPU:处理和运算 内存:临时存储数据 硬盘:永久存储系统 操作系统:是一个软件(特殊), 调度每个硬件之间的数据传输 1.2 操作系统 Windows:xp/7/8 ...