原生js实现选项卡

最新推荐文章于 2021-09-08 16:29:37 发布

發呆0

最新推荐文章于 2021-09-08 16:29:37 发布

阅读量148

点赞数

本文链接：https://blog.csdn.net/weixin_52026870/article/details/113919130

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box{width: 450px;height: 300px;border: 1px solid gray;}
        ul,li{list-style: none;padding: 0;margin: 0;}
        #menu li{float: left;width: 150px;line-height:  35px;text-align: center;background: #999;}
        #menu li.on{background: #fff;}
        #cnt div{display: none;line-height: 300px;text-align: center;}
        #cnt div.current{display: block;}
    </style>
</head>
<body>
    <div id="box">
        <ul id="menu">
            <li class="on">电影</li>
            <li>音乐</li>
            <li>游戏</li>
        </ul>
        <div id="cnt">
            <div class="current">最热电影</div>
            <div>热门歌曲尽在掌握</div>
            <div>全新大作，免费畅玩</div>
        </div>
    </div>

<script>
    var box=document.getElementById('box');
    var cnt=document.getElementById('cnt');
    var lis=box.getElementsByTagName('li');
    var ds=cnt.getElementsByTagName('div');
    for(var i=0;i<lis.length;i++){
        lis[i].index=i;
        lis[i].onclick=function(){
            clearFirst();
            this.className='on'
            clearNext();
            ds[this.index].className="current"

        }
    }
    function clearFirst(){ //清除点击的选项卡
        for(let i=0;i<lis.length;i++){
            lis[i].className=""
        }
    }
    function clearNext(){//清楚内容
        for(let i=0;i<ds.length;i++){
            ds[i].className=""
        }
    }
</script>
</body>
</html>```