<!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. 基于OpenCV/TensorFlow的手写MNIST文字匹配

    手写文字具有哪些统一特征?用ML和SVM是如何做到的? 检测 特征匹配 文字识别 毕竟汉语言文字奇形怪状,很不好辨认,尤其是手写体,跟英文字母不同. MNIST一共有哪些库 现实环境更是复杂 有时还只 ...

  2. Spring Boot教程（四）接收上传的multi-file的文件

    构建工程 为例创建一个springmvc工程你需要spring-boot-starter-thymeleaf和 spring-boot-starter-web的起步依赖.为例能够上传文件在服务器,你需 ...

  3. es入门--curl的使用

    文档介绍: 首先要讲什么是文档,我们中大多是java程序员,java是面向对象的,那么在elasticsearch看来:对象和文档是等价的.只不过这个对象是可以被序列化成key-value形式的jso ...

  4. 关于viewpager的滑动问题

    今天碰到很诡异的问题,viewpager中放置至少三张图片的时候能够正常实现循环滑动,只放置一张或者两张的时候就不行. 后来发现问题症结:viewpager需要保证既可以向左滑动,又可以向右滑动,因此 ...

  5. Docker push image to Docker hub

    1. Before push image to Docker Hub, register an account in https://hub.docker.com/ 2.Input "doc ...

  6. C/C++题库

    1.下面的代码输出什么?为什么? void foo(void) { unsigned int a = 6; int b = -20; (a+b > 6)?puts(“>6”):puts(“ ...

  7. JS将页面中表格，导出到Excel中(IE中)

    原文地址:http://blog.csdn.net/sinat_15114467/article/details/51098522 var idTmr; function getExplorer() ...

  8. 阶段3 1.Mybatis_05.使用Mybatis完成CRUD_6 Mybatis的CRUD-保存操作的细节-获取保存数据的id

    保存后得到id 默认查询出来的是0,因为没有插入就要得到最后的id值. insert语句跟在前面就可以获取到id了 新插入的这条数据就是51 order=after表示在insert语句后再去获取id ...

  9. spring几种获取 HttpServletRequest 对象的方式

    以下的 request 实例都编号了,一共 4 种 方式 1.@Autowired 方式2.public void Test(HttpServletRequest request1, HttpServ ...

  10. pandas 数据排序.sort_index()和.sort_values()

    原文链接:https://www.jianshu.com/p/f0ed06cd5003 import pandas as pd df = pd.DataFrame(……) 说明:以下“df”为Data ...