<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

    <title>Document</title>

    <style>

        .whole{         /*外面的大盒子可以不用设高，被里面上下的盒子撑出高*/

            width:500px;

            margin:100px auto;

            border:1px solid black;

        }

        .shang{     /*上面的盒子同样不用设高，被放着的按钮撑出高度*/

            width:%;

        }

        .xia div{           /*下面盒子里面放着的5个盒子需要设定每个盒子高度是多少，下面的盒子的高度就是这5个盒子的高度总和*/

            width:%;

            background-color: purple;

            height:100px;

            display:none;       /*一开始这5个盒子都要隐藏，等点击相应的按钮的时候，才会显示*/

        }

        .purple{        /*类名是紫色，背景颜色是紫色*/

            background-color: purple;

        }

        .xia .show{     /*这5个盒子的类名是show的时候，盒子会显示，

                        注意一定写为.xia .show ,不能只写.show 因为一开始需要第一个盒子显示而其他的盒子隐藏,只写.show权重比.xia div低，所有盒子的状态不论鼠标点击与否都不会显示*/

            display:block;

        }

    </style>

    <script>    //js部分，点击tab栏中的第一个按钮，第一个按钮变成紫色，下方第一个盒子显示，其他盒子隐藏，点击第二个按钮，相应第二个按钮变成紫色，第二个盒子显示

        window.onload=function()

        {

            var btns=document.getElementById("top").getElementsByTagName("button");

            var divs=document.getElementById("bottom").getElementsByTagName("div");

            for(var i=;i<btns.length;i++)

            {

                btns[i].index=i;        //难点，一开始获得所点击按钮的索引号，根据这个索引号找到对应的盒子让其显示

                btns[i].onclick=function()

                {

                    for(var j=;j<btns.length;j++)

                    {

                        btns[j].className="";   //清空所有按钮的类名

                    }

                    this.className="purple";

                    for(var j=;j<divs.length;j++)

                    {

                        divs[j].className="";   //清空所有盒子的类名

                    }

                    divs[this.index].className="show";  //和当前点击按钮索引号相同的盒子显示出来

                }

            }

        }
js部分代码简化

       window.onload=function()
        {            var btns = document.getElementById("top").getElementsByTagName("button");            var divs = document.getElementById("bottom").getElementsByTagName("div");            for (var i = 0; i < btns.length; i++)            {                btns[i].index = i;                btns[i].onclick = function ()                {                    for(var i=0;i<btns.length;i++)                    {                        btns[i].className="";                        divs[i].className="";                    }                    this.className="purple";                    divs[this.index].className="show";                }            }        }

    </script>

</head>

<body>

        <!--一个大盒子，里面有上下两个盒子，上面的盒子里面有5个按钮，下面的盒子里又装着5个小盒子-->

        <div class="whole">

            <div class="shang" id="top">

                <button>第一个按钮</button>

                <button>第二个按钮</button>

                <button>第三个按钮</button>

                <button>第四个按钮</button>

                <button>第五个按钮</button>

            </div>

            <div class="xia" id="bottom">

                <div class="show">第一个盒子</div>

                <div>第二个盒子</div>

                <div>第三个盒子</div>

                <div>第四个盒子</div>

                <div>第五个盒子</div>

            </div>

        </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> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  5. JavaScript--tab栏切换效果

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

  6. JS实现 Tab栏切换案例

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

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

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

  8. tab栏切换

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

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

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

随机推荐

  1. java多线程的应用场景

    通俗的解释一下多线程先: 多线程用于堆积处理,就像一个大土堆,一个推土机很慢,那么10个推土机一起来处理,当然速度就快了,不过由于位置的限制,如果20个推土机,那么推土机之间会产生相互的避让,相互摩擦 ...

  2. mybatis 中的 update 返回值

    摘自:https://www.jianshu.com/p/80270b93082a 如果定义一个如下的update函数,那么这个函数的返回值到底是啥意思呢?是受影响的行数吗? 验证之前我们先看看数据库 ...

  3. tensorflow实现迁移学习

    此例程出自<TensorFlow实战Google深度学习框架>6.5.2小节 卷积神经网络迁移学习. 数据集来自http://download.tensorflow.org/example ...

  4. 黑马lavarel教程---4、csrf验证及相关

    黑马lavarel教程---4.csrf验证及相关 一.总结 一句话总结: csrf验证就像短信验证码那样验证用户身份,这个验证是为了验证是本站的操作,用的是一个token字符串,外站如果有了这个to ...

  5. CSS - 架构

    MaintainableCSS 原子类几乎只有比行内样式少写几个字符这一个优点,缺点倒是一堆,最好别用 一味追求 "永远不要重复同样的事情两次" 会导致过度思考和过度设计,最终出现 ...

  6. AS基本设置

    1,点开as之前应该做的事  很多人一定会在这个界面卡顿很久,其实这是as在检测更新.所以我们在点开as之前先修改它的配置文件,让它不再更新. 找到你安装as的目录,进入bin文件夹找到idea.pr ...

  7. cento7忘记root密码怎么办

    1.首先开启系统,一直按 e 键 进入编辑选项 2.光标下移,在UTF-8行这一段修改两处,首相找到ro改为rw,即只读改为可读写权限:然后在这段的尾部加入 init=/bin/sh 3.此时按住Ct ...

  8. Sublime Text 3 相关

    Sublime Text 3 相关 Sublime Text 3是款非常实用代码编辑神器,但是想要用任何一款软件,掌握一些快捷键还是很有必要的.. 将Sublime Text 3 添加到右键选项中 打 ...

  9. yum 安装docker后 无法启动

    一,yum安装docker yum -y install docker 启动docker service docker start 报错: journalctl -xe Error starting ...

  10. c++面向对象 —— 类和对象

    类和对象 类用于指定对象的形式,它包含了数据表示法和用于处理数据的方法.类中的数据和方法称为类的成员.函数在一个类中被称为类的成员. 一.类定义 实际上并没有定义任何数据,但它定义了类的名称意味着什么 ...