tab选卡的多种实现方式

最新推荐文章于 2023-01-11 20:40:16 发布

erdaidai

最新推荐文章于 2023-01-11 20:40:16 发布

阅读量415

点赞数

分类专栏：前端开发学习流程文章标签： tab javascript

本文链接：https://blog.csdn.net/erdaidai/article/details/78471449

版权

前端开发学习流程专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>tab</title>
    <style>
        #tab{
            width:99%;
            margin: auto;
        }
        ul{width:100%;margin:20px auto;padding: 0;text-align: center;}
        li{
            width: 19%;
            list-style: none;
            line-height: 2.5em;
            display: inline-table;
            background-color: #e4b9c0;
            cursor: default;
        }
        li:hover{background-color: #c7254e;}
        .content{
            width:96%;
            margin: auto;
            background-color: aquamarine;
            text-align: center;
            height: 200px;
        }
         .content div {
            display: none;
        }
        .content .show{
            width: 100%;
            display: block;
            background-color: #adadad;
        }
    </style>
</head>
<body>
<div id="tab">
    <ul>
        <li>团队介绍</li>
        <li>团队成就</li>
        <li>团队生活</li>
        <li>团队成员</li>
        <li>团队引力</li>
    </ul>

    <div class="content">
        <div class="each show">简介</div>
        <div class="each">时间线 荣誉展示</div>
        <div class="each">平时生活照片</div>
        <div class="each">地图</div>
        <div class="each">优点  条件</div>
    </div>
</div>
<script>
    var oul=document.getElementById("tab");
    var oli=oul.getElementsByTagName("li");
    var odiv=oul.getElementsByTagName("div")[0].getElementsByTagName("div");
    var len=oli.length;
    function show() {
        for(var i=0; i<len;i++){
            if(oli[i]===this){
                odiv[i].className="show";
            }
            else{odiv[i].className=""}//不加each
        }
    }

    /*
    for(var i=0;i<len;i++){
        oli[i].index=i;
        oli[i].onclick=function () {
            show(this.index);
        };
    }
    */
    (function changeTab(){
        for( var i=0;i<len;i++){
            oli[i].onclick=show;
        }
    })();
</script>
</body>
</html>