<!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. Visual Studio使用技巧学习

      F7:  代码窗口 Shift+F7:   对象窗口 F4:  属性窗口 闪电图标:    对象的事件 F5:   编译及运行 Ctrl+F5:  编译及运行(不调试) svm+两次Tab:  s ...

  2. uvm_misc——杂货铺（miscellaneous）

    uvm_misc 是个很有意思的文件夹,本质上就是个UVM的杂货铺,包含一些很重要的class, task, function, 但不知道给归类到哪儿,所以,uvm_misc就很好地承担了这个任务,几 ...

  3. cp参数详解

    -a 相当于pdr的意思 -d 若原文件为连接文件,则复制链接文件属性,而非文件本身 -f 强制复制,有重复时,不询问用户,而直接强制复制 -i 目标文件存在的话,先询问 -p 与文件的属性一起复制 ...

  4. 洛谷 P1168 中位数

    题目描述 给出一个长度为N的非负整数序列A[i],对于所有1 ≤ k ≤ (N + 1) / 2,输出A[1], A[3], …, A[2k - 1]的中位数.[color=red]即[/color] ...

  5. ImportError: No module named flask.ext.wtf 解决方法

    install pip install flask.ext.wtf

  6. stringstream类的简介和用法

    一.简介 <sstream>类库定义了三种类:istringstream,ostringstream,stringstream.分别用来进行流的输入,流的输出,输入输出操作.在此演示str ...

  7. 利用python进行数据分析1_numpy的基本操作，建模基础

    import numpy as np # 生成指定维度的随机多维数据 data=np.random.rand(2,3) print(data) print(type(data)) 结果: [[0.11 ...

  8. Python-DB接口规范

    threadsafety 线程安全级别.threadsafety 这是一个整数, 取值范围如下: 0:不支持线程安全, 多个线程不能共享此模块 1:初级线程安全支持: 线程可以共享模块, 但不能共享连 ...

  9. kafka启动报错&问题解决

    kafka启动报错&问题解决 一早上班,就收到运维同事通知说有一台物理机宕机,导致虚拟机挂了.只得重启kafka服务器. 1.启动 启动zookeeper bin/zkServer.sh st ...

  10. javascript 写一个随机范围整数的思路

    const {random} = Math; //返回 [min,max] 的随机值 //[0,1) * (max - min + 1) => [0,max-min+1) //[0,max-mi ...