Js tab栏切换

最新推荐文章于 2024-07-26 11:41:15 发布

有点苏

最新推荐文章于 2024-07-26 11:41:15 发布

阅读量74

点赞数

文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/WanHuaEr/article/details/126315885

版权

tab栏点击切换

案例分析

可以分为两步做

上半部分，点击某个按钮，当前底色变为红色，其余不变（利用排他思路）
下半部分，跟随上半部分的选项卡变化，写到上半点击时间里
上半部分与下半相对应

核心思路：
给lis添加自定义属性属性值从0开始
点击lis是对应div显示内容其余隐藏（排他思路）

代码

<!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;
        }
        .tab{
            width: 500px;
            margin: 100px auto;
        }
        .tab_list{
            margin: 0 auto;
            width: 500px;
            height: 39px;
            background: rgb(221, 221, 221);
            border: 1px solid #999;
        }
        .tab_list li{
            float: left;
            height: 39px;
            line-height: 39px;
            cursor: pointer;
            list-style: none;
            padding:0 20px;
            
            }
        .current{
            background: red;
            color: aliceblue;
        }
        .item{
            display: none;
        }
        
    </style>
</head>
<body>
    <div class="tab">
        <div class="tab_list">
            <ul>
                <li class="current">介绍</li>
                <li>规格</li>
                <li>售后</li>
                <li>评价</li>
                <li>社区</li>
            </ul>
        </div>
        <div>
            <div class="item" style="display: inline;">花花</div>
            <div class="item" >人类</div> 
            <div class="item">无</div>
            <div class="item">完美</div>
            <div class="item">没得人</div>
        </div>
    </div>
    <script>
        //获取元素
        var lis = document.querySelector('.tab_list').querySelectorAll('li');
        var items = document.querySelectorAll('.item');
        //for 循环遍历 lis
        for(var i = 0; i < lis.length; i++){
            //给lis绑定 自定义属性index 并给index赋值i
            lis[i].setAttribute('index',i);
            //给lis创建绑定事件 
            lis[i].onclick = function (){
                //取出index的对应的值
                var index = this.getAttribute('index');
                console.log(index);
                console.log(items);
                //利用for循环给items取消自带的display属性
                for(var i = 0; i < items.length; i++){
                    items[i].style.display = 'none';
                }
                //items对应lis的值 display给予block值 让其显示
                items[index].style.display = 'block';
                //应用for循环取消lis的class
                for(var i = 0; i < lis.length; i++){
                    lis[i].className = '';
                }
                //给点击的元素赋予class值
                this.className = 'current';
             
            }
        }
    </script>
</body>
</html>