JS练习之tab栏(选项卡)原生代码

最新推荐文章于 2022-09-08 21:22:05 发布

「已注销」

最新推荐文章于 2022-09-08 21:22:05 发布

阅读量275

点赞数

分类专栏： JAVASCRIPT HTML/CSS

本文链接：https://blog.csdn.net/weixin_41855546/article/details/107799235

版权

JAVASCRIPT 同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

HTML/CSS

4 篇文章 0 订阅

订阅专栏

今天来个tab栏的练习，从B站上看的视频，按照视频撸一遍代码。

要点：

排他思想，点击当前对象，追加样式及显示相关内容
在js代码中做增加自定义属性的逻辑处理，使用自定义属性来关联点击和内容的呈现，进一步理解一下，假如被点击的对象是A，相关显示的内容是B，那么需要提前为所有的A设置自定义属性data-index，且值为数字(从0开始，刚好符合索引的规则)，接着点击A时，获取A自定义属性值，当成B的索引，去调用B。

示意图：
在这里插入图片描述

处理逻辑：
点击菜单，使用菜单的索引去设置内容区的display属性，因为菜单列表的索引和内容区的索引是一致的。

实例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>tab栏、选项卡练习</title>
    <style>
        ul li {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .tab_list ul {
            display: flex;
            flex-direction: row;
            background: burlywood;
            height: 40px;
        }
        .tab_list .current {
            background-color: brown;
            color: #fff;
        }

        .tab_list li {
            cursor: pointer;
            line-height: 40px;
            margin-right: 20px;
        }

        .tab_con .item {
            display: none;
        }
    </style>
</head>
<body>
    <div class="tab">
        <div class="tab_list">
            <ul>
                <li class="current">商品介绍</li>
                <li>规格与包装</li>
                <li>售后保障</li>
                <li>商品评价(120)</li>
                <li>手机社区</li>
            </ul>
        </div>
        <div class="tab_con">
            <div class="item" style="display: block;">商品介绍内容</div>
            <div class="item">规格与包装说明</div>
            <div class="item">售后保障规则</div>
            <div class="item">商品评价列表</div>
            <div class="item">手机社区板块</div>
        </div>
    </div>
    <script>
        // 获取元素
        var tab_list =document.querySelector(".tab_list");
        var lis = tab_list.querySelectorAll("li");
		var items = document.querySelector('.tab_con').querySelectorAll(".item")
        // 循环li，绑定点击事件
        for(var i = 0; i < lis.length; i++){
			// 设置自定义属性
			lis[i].setAttribute('data-index', i)
			// 点击事件
            lis[i].onclick = function(){
                // 清除其他li的样式
                for(var i = 0; i < lis.length; i++){
                    lis[i].className = "";
                }
                // 当前点击元素添加current类
                this.className = "current";
				
				// 显示内容模块，获取当前对象的自定义属性data-index
				var index = this.getAttribute('data-index')
				// 排他，清除所有<li>的内容，最后设置当前li的内容为block
				for(var i = 0; i< items.length; i++){
					items[i].style.display = "none";
				}
				items[index].style.display = "block";
            }
        }
    </script>
</body>
</html>

实现效果：

在这里插入图片描述

「已注销」

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS练习之tab栏(选项卡)原生代码

今天来个tab栏的练习，从B站上看的视频，按照视频撸一遍代码。要点：排他思想，点击当前对象，追加样式及显示相关内容在js代码中做增加自定义属性的逻辑处理，使用自定义属性来关联点击和内容的呈现，进一步理解一下，假如被点击的对象是A，相关显示的内容是B，那么需要提前为所有的A设置自定义属性data-index，且值为数字(从0开始，刚好符合索引的规则)，接着点击A时，获取A自定义属性值，当成B的索引，去调用B。示意图：处理逻辑：点击菜单，使用菜单的索引去设置内容区的display属性，因为菜单
复制链接

扫一扫

专栏目录