<!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>

        /*上面span部分，背景颜色是天蓝色，下面盒子颜色背景是粉红色，出来第一个盒子，其他盒子都隐藏*/

        *{

            margin:0;

            padding:0;

        }

        .whole{

            width:295px;

            height:300px;

            margin:100px auto;

        }

        .shang{

            width:100%;

            text-align:center;

        }

        .shang span{

            display:inline-block;

            background-color:skyblue;

            width:70px;

            height:30px;

            line-height:30px;

        }

        .xia div{

            width:295px;

            height:200px;

            margin-right:0 5px;

            background-color: pink;

            display:none;

        }

        .xia .show{

            display:block;

        }

        .shang .pink{

            background-color:pink;

        }

    </style>

    <script>

//            js部分，当鼠标划过每一个span时，比如划过新闻时，新闻这个span的背景颜色会变成粉色，其它都还是天蓝色，同时下面新闻板块会显示，其他会隐藏

                window.onload=function()

                {

                    var spans=document.getElementById("top").getElementsByTagName("span");

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

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

                    {

                        spans[i].index=i;

                        spans[i].onmouseover=function()

                        {

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

                            {

                                spans[j].className="";

                                divs[j].className="";

                            }

                            this.className="pink";

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

                        }

                    }

                }

    </script>

</head>

    <!--一个大盒子，上面部分是4个span，分别是新闻，体育，娱乐，八卦,下面对应的是具体的内容-->

<body>

    <div class="whole" id="whole1">

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

                    <span>新闻</span>

                    <span>体育</span>

                    <span>娱乐</span>

                    <span>八卦</span>

            </div>

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

                     <div class="show">新闻板块</div>

                     <div>体育板块</div>

                     <div>娱乐板块</div>

                     <div>八卦板块</div>

            </div>

    </div>

</body>

　　

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. CentOS7/RHEL7 pacemaker+corosync高可用集群搭建

     TOC \o "1-3" \h \z \u 一.集群信息... PAGEREF _Toc502099174 \h 4 08D0C9EA79F9BACE118C8200AA004B ...

  2. KafKa集群安装详细步骤

    最近在使用Spring Cloud进行分布式微服务搭建,顺便对集成KafKa的方案做了一些总结,今天详细介绍一下KafKa集群安装过程: 1. 在根目录创建kafka文件夹(service1.serv ...

  3. tomcat的work目录的作用

    最近发现,很多网友喜欢把tomcat的work目录里的东西叫做缓存,其实那不是很恰当,work目录只是tomcat的工作目录,也就是tomcat把jsp转换为class文件的工作目录,这也正是为什么它 ...

  4. 2018 icpc 徐州

    A 矩阵树定理可以用于最小生成树计数,最直观的做法就是求个mst,再用矩阵树定理求最小生成树个数,但是n<=1e5,显然不是o(n^3)可以做出来的. 考虑随机数据生成器,固定1e5的边,但是边 ...

  5. Django开启https(不用nginx)

    首先安装需要用到的包 pip install django-extensions pip install django-werkzeug-debugger-runserver pip install ...

  6. 激活Win Server 2008 R2 Datacenter

    直接手撸KMS命令 管理员打开cmd输入: slmgr /skms kms.03k.org 然后用这个Key: 74YFP-3QFB3-KQT8W-PMXWJ-7M648

  7. lnmp一键安装包卸载mysql,重新安装报错mysql57-community-release conflicts with mysql-community-release-el6-5.noarch

    环境:CentOS Linux release 7.6.1810 lnmp1.5 独立下载mysql仓库 wget -i -c http://dev.mysql.com/get/mysql57-com ...

  8. uwsgi + nginx 部署python项目（二）

    实现负载均衡 开启两个服务器,nginx负责分发请求到两个服务器,以减轻单个服务器负担. 配置uwsgi服务器 在a项目目录下生成uwsgi.ini文件,在b项目目录下生成uwsgi.ini文件,如何 ...

  9. “AIIA”杯-国家电网-电力专业领域词汇挖掘

    十一之前一直在做“电力领域的词典构建”任务,今天也去聆听了前五支队伍的报告,现结合这段时间来的项目经历,写一下自己的若干心得. 电力领域的词典构建——方法1(非监督学习) 在电力领域词典构建心得1.0 ...

  10. IF条件控制

    条件控制 定义 Python 条件语句是通过一条或多条语句的执行结果(True 或者 False)来决定执行的代码块. 如下图所示 IF语句 if condition_1: statement_blo ...