Tabl栏效果的实现

最新推荐文章于 2022-11-23 11:42:49 发布

youngjqz

最新推荐文章于 2022-11-23 11:42:49 发布

阅读量335

点赞数 1

分类专栏：前端 javascript 页面效果 DOM 文章标签： JavaScript Tab栏页面效果前端

本文链接：https://blog.csdn.net/youngjqz/article/details/77762712

版权

前端同时被 3 个专栏收录

24 篇文章 1 订阅

订阅专栏

javascript

21 篇文章 0 订阅

订阅专栏

页面效果

2 篇文章 0 订阅

订阅专栏

很多页面中会有Tab效果，Tab栏效果可以使页面展现更多的内容，而且视觉效果也很不错，那些Tab栏效果改如果实现呢，现在我们就来说一下思路：Tab栏的头部和身体部分是一一对应的效果，点击头部的每一个元素，身体部分会跟着变化到相应的元素进行展示；代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #parent{
            width: 500px;
            height: 50px;
        }
         li{
            list-style: none;
            width: 100px;
            height: 50px;
            float: left;
            border-bottom: 1px solid cadetblue;
            box-sizing: border-box;
            text-align: center;
            line-height: 50px;
            cursor: pointer;
             background-color: #84ccc9;

        }
        #pp{
            width: 500px;
            height: 300px;
            background-color: cadetblue;
            position: relative;
            overflow: hidden;
        }
        .box{
            width: 500px;
            height: 300px;
            display: none;
            text-align: center;
            line-height: 300px;
            font-size: 36px;
        }
     .block{
         display: block;
         position: absolute;
         left: 0;
         top: 0;
     }
     .none{
            display: none;
        }
     .bg{
            background-color: cadetblue;
        }
    </style>
</head>
<body>
<ul id="parent">
    <li class="bg"><p href="">第一个</p></li>
    <li><p href="">第二个</p></li>
    <li><p href="">第三个</p></li>
    <li><p href="">第四个</p></li>
    <li><p href="">第五个</p></li>
</ul>
<div id="pp">
    <div class="box block">HTML</div>
    <div class="box">CSS</div>
    <div class="box">JavaScript</div>
    <div class="box">DOM</div>
    <div class="box">BOM</div>
</div>
</body>
</html>
<script>
    window.onload=function () {
//        获取对象
        var oParent=document.getElementById("parent");
        var oLi=oParent.getElementsByTagName("li");
//        获取所有的box
        var oPP=document.getElementById("pp");
        var oDiv=oPP.getElementsByTagName("div");
        console.log(oDiv[0]);
//        遍历所有的a标签
        for(var i=0;i<oLi.length;i++){
            //        给a标签添加点击事件
            oLi[i].setAttribute("index",i);
            oLi[i].onclick=function () {
//                给点击的按钮的背景高亮
//                先给所有的li的背景设置为：#84ccc9
                for(var j=0;j<oLi.length;j++){
                        oLi[j].style.background="#84ccc9";
                }
//              给当前点击的li标签的背景设置为另外一种颜色
                this.style.background="cadetblue";
//        当li标签被点击的时候对应的div标签显示
//                给li标签用自定义属性存储一个索引值
                var index=this.getAttribute("index");
              for(var z=0;z<oDiv.length;z++){
//                  循环进行判断，如果z=index，则说明是与当先所选中的li相对应的标签，将其display设置为block；
                  if(z==index){
                      oDiv[z].className="box block";
                  }else {
                      oDiv[z].className="box none"
                  }
              }
            }
        }
    }
</script>

上面的代码虽然比较多，但是思路很清晰，也很容易理解，没有比较绕的地方，下面我将优化的代码写出来，可以做一个对比，根据上面的思路看优化过后的代码会更容易理解，这里我只给出啦js代码，因为html和css结构和上面的一直，只是对js代码进行啦优化。

<script>
    window.onload=function () {
        var oParent=document.getElementById("parent");
        var oLi=oParent.getElementsByTagName("li");
        var oPP=document.getElementById("pp");
        var oDiv=oPP.getElementsByTagName("div");
        for(var i=0;i<oLi.length;i++){
//            在li标签里面存一个下标
             oLi[i].index=i;
            oLi[i].onclick=function () {
//                先将li标签的样式定义为空，然后让div标签的display为none
                for(var i=0;i<oLi.length;i++){
                    oLi[i].className=" ";
                    oDiv[i].className="box none"
                }
//               给当前的li标签的类名为bg；
                this.className="bg";
//                给对应的div标签的类名为block，让其显示
                oDiv[this.index].className="box block"

            }
        }
    }
</script>