怎么实现选项卡？

最新推荐文章于 2021-12-10 15:33:16 发布

一只桃子~

最新推荐文章于 2021-12-10 15:33:16 发布

阅读量100

点赞数

本文链接：https://blog.csdn.net/qq_43405603/article/details/119786951

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul,ol{
            list-style: none;
        }
        .main{
            width: 500px;
            margin: auto;   
        }
        .lists{
            display: flex;
            justify-content: space-between;
        }
        .lists>li{/* 上边三个按钮样式 */
            width:150px;
            height: 40px;
            line-height: 40px;
            border: 1px solid;
            display: inline-block;
            
            text-align: center;
            position: relative;
            top: 1px;/* 按钮与div线条重合 */
        }
        .lists>li.current{/* 选中按钮时候显示的颜色 */
            background: cornflowerblue;
            border-bottom-color: cornflowerblue;/* 为了按钮与div打通，无横线 */
        }
        .main>div{/* 切换的div样式 */
            width: 100%;
            height: 300px;
            line-height: 300px;
            text-align: center;
            border: 1px solid #333;
            display: none;
        }
        .main>div.current{
            background: cornflowerblue;
            display: block;
        }
    </style>
</head>
<body>
    <div id="main" class="main">
        <ul class="lists">
            <li class="">电视1</li>
            <li>电视2</li>
            <li>电视3</li>
        </ul>
        <div class="">电视1</div>
        <div>电视2</div>
        <div>电视3</div>
    </div>
</body>
</html>
<script>
    //1、获取操作的元素
    var main=document.getElementById("main");
    var uls=document.getElementsByTagName("lists")
    var lis=document.getElementsByTagName("li")
    //var lis=main.documentsByTagName("li");上边两个简写
    var divs=main.getElementsByTagName("div")
    //点击按钮的时候，给它加current样式
    //为了保证点击的唯一性，点之前把其他清空,否则会显示三个div

    //循环给每一个按钮绑定点击事件,点谁给谁加类名
    for(let i=0;i<lis.length;i++){
        lis[i].onclick=function(){
       //lis[0].className="";
       //divs[0].className="" 点击之前清除类名，可用for循环清除
       for(let i=0;i<lis.length;i++){
           lis[i].className=""
           divs[i].className=""
       }
       lis[i].className="current";
       divs[i].className="current"
       }
    }
</script>

一只桃子~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
怎么实现选项卡？

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do.
复制链接

扫一扫