<!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. Mybatis学习笔记之---多表查询(2)

    Mybatis多表查询(2) (一)举例 用户和角色 一个用户可以有多个角色,一个角色可以赋予多个用户 (二)步骤 1.建立两张表:用户表,角色表,让用户表和角色表具有多对多的关系.需要使用中间表,中 ...

  2. 事务的ACID属性

    事务,一个操作序列,这些操作要么都执行,要么都不执行,是一个不可分割的整体. ACID为事务的四大属性 原子性(Atomic):指整个数据库事务是不可分割的工作单位.只有使据库中所有的操作执行成功,才 ...

  3. Windows下开发环境搭建

    安装Make: https://sourceforge.net/projects/gnuwin32/ 安装G++:https://sourceforge.net/projects/mingw/

  4. C#简单工厂模式和单列设计模式潜要解析

    简单工厂设计模式,又叫做静态工厂方法(Static Factory Method)模式,就是由一个工厂类根据传入的参量决定创建出哪一种产品类的实例. 简单工厂模式是工厂模式家族中最简单实用的模式.简单 ...

  5. 测开之路一百五十一：ajax的作用和基本实现原理

    有些情况需要请求和刷新部分资源,但是又不希望整个页面都刷新,这个时候就需要用ajax来处理,即页面的某一部分触发请求和刷新内容 准备两个视图和html from flask import Flask, ...

  6. HTTP学习记录：二、请求方法

    学习资源主要为:@小坦克HTTP相关博客 最基础的是4种,GET.POST.PUT.DELETE对应着对资源的查.改.增.删.最常用的是GET和POST. GET一般用于获取/查询资源信息: POST ...

  7. ubuntu16.04 卸载及安装MySQL

    以MySQL- 5.7.18为例: sudo apt-get autoremove --purge mysql-server-5.7 #sudo apt-get remove mysql-server ...

  8. Vue模版编译

    一 模版文件 <div> <header> <h1>I'm a template!</h1> </header> <p v-if=&q ...

  9. PHP 对Memcache的使用实例

    <?php //连接Memcache$mem = new Memcache;$mem->connect("localhost", 11211) or die (&quo ...

  10. linux 查看汉字编码方式

    hexdump -C b.bcp 09 为\t 0a 为\n 一个汉字占三位为utf-8  占两位的不对