【JavaScript练习】tab栏切换效果

最新推荐文章于 2022-03-23 20:48:27 发布

HsiehChia

最新推荐文章于 2022-03-23 20:48:27 发布

阅读量230

点赞数

分类专栏： JavaScript练习文章标签： javascript 前端

本文链接：https://blog.csdn.net/qq_43303646/article/details/113616419

版权

JavaScript练习专栏收录该内容

40 篇文章 2 订阅

订阅专栏

【JavaScript练习】tab栏切换效果

运行结果：
在这里插入图片描述

<!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>
        * {
            margin: 0;
            padding: 0;
        }
        
        li {
            list-style: none;
        }
        
        .tab {
            margin: 100px auto;
            width: 700px;
            height: 300px;
            border: 1px solid #bbb;
        }
        
        .tab-list {
            display: inline-block;
            box-sizing: border-box;
            border: 1px solid #999;
            background-color: #ddd;
            width: 100%;
        }
        
        .tab-list li {
            float: left;
            padding: 8px 20px;
            font-size: 16px;
        }
        
        .tab-list li:hover {
            cursor: pointer;
        }
        
        .item {
            display: none;
        }
        
        .current {
            background-color: rgb(228, 27, 27);
            color: #fff;
        }
        
        .show {
            display: block;
        }
    </style>
</head>

<body>
    <div class="tab">
        <div class="tab-list">
            <ul>
                <li class="current">商品介绍</li>
                <li>规格与包装</li>
                <li>售后保障</li>
                <li>商品评价(500)</li>
                <li>手机社区</li>
            </ul>
        </div>
        <div class="tab-con">
            <div class="item show">
                1111111111111
            </div>
            <div class="item">
                2222222222222
            </div>
            <div class="item">
                33333333333
            </div>
            <div class="item">
                44444444444444
            </div>
            <div class="item">
                5555555555555
            </div>
        </div>
    </div>
    <script>
        var tab_list = document.querySelector('.tab-list');
        var lis = tab_list.querySelectorAll('li');
        var items = document.querySelectorAll('.item');
        for (var i = 0; i < lis.length; i++) {
            // 给上面选项设置索引号
            lis[i].setAttribute('index', i);
            lis[i].onclick = function() {
                // 1.上面选项点击变化
                for (var j = 0; j < lis.length; j++) {
                    lis[j].className = '';
                }
                this.className = 'current';
                // 2.下面选项相应变化
                var index = this.getAttribute('index');
                for (var k = 0; k < items.length; k++) {
                    items[k].style.display = 'none';
                }
                items[index].style.display = 'block';
            }
        }
    </script>
</body>

</html>

HsiehChia

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
【JavaScript练习】tab栏切换效果

【JavaScript练习】tab栏切换效果运行结果：<!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
复制链接

扫一扫

专栏目录