<!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. java-String与Integer的相互转化

    一.Integer转String //方法一:Integer类的静态方法toString() Integer a = 2; String str = Integer.toString(a)   //方 ...

  2. layui 获取select option value 获取text

    $.trim($("#processState").val()): //获取val $("#processState option:selected").tex ...

  3. java第二周小结

    这是接触Java的第一周,了解这个语言的一些基础知识,下面是对这段时间重要知识点的汇总 一.Java是一种面向对象的语言    特点为:简洁高效.可移植性.适合分布式计算.健壮防患于未然的特性.多线程 ...

  4. 2018年5月6日GDCPC（广东赛区）总结

    大二第二次参加省赛了,这次成绩不是太理想. ———————————————————————————————— day1:试机 约好的12点钟在地铁站集合,好像就我一个人迟到了5分钟,被sen主席批判一 ...

  5. Vue 项目构建

    一.初始化项目 1.vue init webpack (fileName) 2.项目名称 3.项目描述 4.项目作者 5.是否依赖 .Vue 文件开发 第一个选项可以不依赖 .Vue 文件开发, 第二 ...

  6. ObjectDataSource.ObjectCreating 事件

    ObjectCreating 事件在创建由 TypeName 属性标识的对象之前发生. 命名空间:System.Web.UI.WebControls程序集:System.Web(在 system.we ...

  7. mysql查询时特殊字符转译

    commons.lang String value = StringEscapeUtils.escapeSql(searchRequest.getSearchValue());

  8. 你的第一个Quartz程序

    package org.quartz.examples.example1; import java.util.Date; import org.slf4j.Logger; import org.slf ...

  9. RESR API (三)之Views

    Class-based Views Django's class-based views are a welcome departure from the old-style views. - Rei ...

  10. postman杂记

    接到测试任务,测试6个接口 rap2 上的接口比较多,整体导出内容太多 就一个接口一个接口的,复制到了postman上 rap2部分接口,开发没有备注简介内容:通知开发备注下 对接口的理解,还是靠功能 ...