利用js实现简单选项卡

最新推荐文章于 2023-07-01 18:20:34 发布

@@@厚积而薄发

最新推荐文章于 2023-07-01 18:20:34 发布

阅读量226

点赞数

文章标签： javascript html css

本文链接：https://blog.csdn.net/haiyanzuibang/article/details/106323831

版权

<!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>
        button.active{
            background:yellow;
            color:white;
        }
    </style>
</head>
<body>
    <div class = "btns">
        <button>btn1</button>
        <button>btn2</button>
        <button>btn3</button>
    </div>
    <ul class="contents">
        <li>content1</li>
        <li>content2</li>
        <li>content3</li>
    </ul>
    <script>
        var lis = document.getElementsByTagName("li");
        var btns = document.getElementsByTagName("button");
        

        function showCurrent(title){
            for(var i=0;i<lis.length;i++){
                if(i==title){
                    lis[i].style.display='block';
                    btns[i].className = 'active';
                }else{
                    lis[i].style.display='none';
                    btns[i].className = ' ';
                }
            }
        }
        showCurrent();


        for(var k = 0;k<btns.length;k++){
            btns[k].title = k;//给btn添加属性
            //给所有btn都添加属性
            btns[k].onclick = function(){
                console.log(this.title);
                showCurrent(this.title);
            };
        }
    </script>
</body>
</html>
————————————————
版权声明：本文为CSDN博主「haiyanzuibang」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/haiyanzuibang/article/details/106323716