<!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. Tensorflow视频教程&Pytorch视频教程

    基于tensorflow做研究和基于pytorch做研究哪个好?哪个更容易复制代码,工业上更易用.Keras和tensorflow.pytorch的关系. Keras:Keras是一个由Python编 ...

  2. VTK 编译过程中出现的hdf5长度(I64)错误解决办法

    最近在使用vtk和cuda做大规模图像处理方面的问题研究,在编译vtk的过程中发现第三方库hdf5不能够解决I64长度的探测识别问题.为了节约大家的时间,现在把我经过实践得到的解决方案共享出来,这里要 ...

  3. 【转】jqprint打印时自定义页眉页脚

    需求:自定义页眉,实现打印时分页时每页页眉都显示相同的信息 打印所用插件jqprint 解决方法: <div class="divHeader"> <span s ...

  4. React用dangerouslySetInnerHTML动态渲染HTML

    React用dangerouslySetInnerHTML动态渲染HTML React项目,需要把后台返回的一段html代码在页面上显示 在render获取内容, //在render里获取内容 con ...

  5. android日志优先级

    Android 的日志分为如下几个优先级(priority): V —— Verbose(最低,输出得最多) D —— Debug I —— Info W —— Warning E —— Error ...

  6. 关于maven项目 启动页面报错 The type java.io.ObjectInputStream cannot be resolved.

    这种情况,要修改jdk版本,默认jdk选择 jdk不选jre windows---->perference---->java----->installes jres-----> ...

  7. Linux_LEMP

    目录 目录 LEMP Nginx mysql PHP php-fpm Script LEMP Nginx是一个高性能的HTTP和反向代理服务器,也是一个 IMAP/POP3/SMTP 服务器,因它的稳 ...

  8. mysql 5.5 安装教程

    (转自:https://www.cnblogs.com/solargen/p/6835399.html) 1. 官网下载mysql5.5 下载地址: http://dev.mysql.com/down ...

  9. Python学习之==>URL编码解码&if __name__ == '__main__'

    一.URL编码解码 url的编码解码需要用到标准模块urllib中的parse方法 from urllib import parse url = 'http://www.baidu.com?query ...

  10. C# DES 加解密

    using System; using System.Text; using System.Security.Cryptography; using System.Diagnostics; using ...