<!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. 关于HTML5手机端页面缩放的问题

    通常在写HTML5手机端页面的时候,我们会发现页面所显示元素的比例不正确,那此时我们需要添加的就是: <meta name="viewport" content=" ...

  2. 用YII实现多重查询(基于tag)

    场景: 有一个饭店表 restaurant,存放所有饭店记录.我需要一个功能,将饭店按照不同的条件进行多重查询.就象这样:   氛围:浪漫 / 商务会谈 / 茅草屋 菜系:川菜 / 鲁菜 / 家常菜. ...

  3. 电脑连接海信电视 HDMI

    注意:我们家的电视是海信的,所以不能代表所有的电视哦~~~ 家里电视有线电视已经过期很长时间了,早就想把电脑连接到电视上用电视做显示器的心了,今天来兴趣了,就弄了一下!!! 用电脑连接电视需要先解决两 ...

  4. poj 2411 Mondriaan's Dream （轮廓线DP）

    题意:有一个n*m的棋盘,要求用1*2的骨牌来覆盖满它,有多少种方案?(n<12,m<12) 思路: 由于n和m都比较小,可以用轮廓线,就是维护最后边所需要的几个状态,然后进行DP.这里需 ...

  5. sort函数的使用

    此篇当作自己的笔记(水平太菜,这都一直没搞明白) sort()函数的用法1)sort函数包含在头文件<algroithm>中,还要结合using namespace std2)sort有三 ...

  6. Java加腾讯云实现短信验证码功能

    一.概要 现如今在日常工作和生活中短信验证码对于我们来说是非常熟悉的,比较常见的注册账号或者交易支付时候,手机会收到一个短信验证码,我们可以通过验证码来有效验证身份,避免一些信息被盗. 验证身份 目前 ...

  7. 两个input标签之间间隙问题的解决

    <input type="text"> <input type="button" value="搜索"> 代码显示效 ...

  8. 判断一个链表是否为回文结构 【题目】 给定一个链表的头节点head，请判断该链表是否为回 文结构。 例如： 1->2->1，返回true。 1->2->2->1，返回true。 15->6->15，返回true。 1->2->3，返回false。 进阶： 如果链表长度为N，时间复杂度达到O(N)，额外空间复杂 度达到O(1)。

    方式1:借助栈 空间辅助度是O(N) 方式2: 借助栈 空间复杂度是 O(n/2).只存后半个链表 方式3: 反转后半个链表  最后再反转回来 package my_basic.class_3; im ...

  9. 给 MSYS2 添加国内源

    https://wiki.qt.io/MSYS2pacman -S base-devel git mercurial svn wget p7zip软件包 开发包 http://mirrors.ustc ...

  10. GIMP用Path作画了解一下

    先准备好Path的底稿,只是实验学到的东西,粗糙了点.Paint through the Path,顾名思义,就是沿着Path作画: 1/如果选择的是Stroke line,可以根据自己的喜好,调节S ...