JS获取元素、获取元素属性、添加自定义属性、排他思维、for循环制作tab导航栏。

QinGP97

已于 2022-08-21 18:35:05 修改

阅读量209

点赞数

分类专栏： JavaScript 文章标签： html 前端 css

于 2022-08-21 18:34:41 首次发布

本文链接：https://blog.csdn.net/QinGP97/article/details/126453858

版权

JavaScript 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

需求：制作Tab导航栏

开发环境：VS code 、Edge

源码：

<!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>06-tab栏切换（重点）复习</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }
        
        .tab_head {
            width: 1500px;
            height: 50px;
            margin: 100px auto 0 auto;
            /* border: 1px solid #ccc; */
            border-bottom: 2px solid #c81623;
            background-color: rgb(247, 244, 244);
        }
        
        .tab_head ul li {
            float: left;
            padding: 0 20px;
            line-height: 50px;
            cursor: pointer;
        }
        
        .tab_head ul .current {
            background-color: #c81623;
            color: #fff;
        }
        
        .tab_body {
            width: 1500px;
            margin: 0 auto 0 auto;
        }
        
        .tab_body .item {
            display: none;
        }
    </style>
</head>

<body>
    <div class="tab">
        <div class="tab_head">
            <ul class="tab_list">
                <li class='current'>商品介绍</li>
                <li>价格与包装</li>
                <li>售后保障</li>
                <li>商品评价（5000+）</li>
                <li>手机社区</li>
            </ul>
        </div>
        <div class="tab_body">
            <div class="item">商品介绍模块</div>
            <div class="item">价格与包装模块</div>
            <div class="item">售后保障模块</div>
            <div class="item">商品评价模块</div>
            <div class="item">手机社区模块</div>
        </div>

        <script>
            // 1. 获取元素
            var lis = document.querySelector('.tab_list').querySelectorAll('li');
            console.log(lis);
            var items = document.getElementsByClassName('item');
            console.log(items);

            // for循环绑定事件
            // 排他思想
            for (var i = 0; i < lis.length; i++) {
                // 注册事件  改变背景颜色等样式
                //  开始给5个小li设置索引号，采用自定义属性的方式：setAttribute()
                lis[i].setAttribute('data_li_index', i);

                lis[i].onclick = function() {

                    // 点击时干掉所有人 清除所有北京颜色
                    for (var i = 0; i < lis.length; i++) {
                        lis[i].className = '';
                    }
                    // 留下我自己  改变背景等样式
                    this.className = 'current';

                    var data_li_index = this.getAttribute('data_li_index');
                    console.log(data_li_index);

                    // 排他思想--先干掉所有模块，再显示当前模块
                    // 干掉所有模块
                    for (var i = 0; i < lis.length; i++) {
                        items[i].style.display = '';
                        items[data_li_index].style.display = 'block';
                    }

                }
            }
        </script>
    </div>

</body>

</html>