tab栏切换效果运用案例

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

  

posted @ 2019-07-17 11:01  shanlu  阅读(234)  评论(0编辑  收藏  举报