jsTab栏制作选项卡

最新推荐文章于 2023-01-14 17:44:15 发布

前端张子豪

最新推荐文章于 2023-01-14 17:44:15 发布

阅读量560

点赞数

分类专栏： js 文章标签： html css html5

本文链接：https://blog.csdn.net/weixin_49075393/article/details/120515138

版权

js 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

这个博客展示了如何使用JavaScript和HTML实现一个Tab选项卡切换功能。通过为每个选项卡设置自定义属性并监听点击事件，实现内容的动态显示与隐藏，确保显示内容与选项卡选择保持一致。核心思路是通过改变类名和调整元素的display属性来控制模块的可见性。

摘要由CSDN通过智能技术生成

案例分析
1、Tab栏切换有2个大的模块
2、上的模块选项卡，点某一个，当前这一个底色会变，其他不变（排他思想）修改类名的方法，
3、下面的模块内容，会跟随上面的选项卡变化。所以下面的模块写到点击事件里。
4、规律：下面的模块显示内容和上面的选项卡一一对应，相匹配。
5、核心思路：给上面的模块里面的所有元素添加自定义属性属性值从0开始。
6、当我们点击上面模块的某一个li，让下面模块对应序号的内容显示，其他隐藏（排他）。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .tab-box{
            width: 500px;
            height: 400px;
            margin: 100px auto;
        }
        ul{
            width: 100%;
            height: 40px;
            border-bottom: 1px solid rgb(255, 30, 0);
            background-color: rgba(231, 230, 230, 0.856);
        }
        li{
            width: 25%;
            height: 100%;
            float: left;
            text-align: center;
            line-height: 40px;
        }
        .item{
            background-color: rgb(255, 30, 0);
            color: white;
        }
        .box{
            width: 100%;
            height: 460px;
        }
        .box-item{
            display: none;
        }
        
    </style>
</head>

<body>
    <div class="tab-box">
        <ul>
            <li class="item">商品介绍</li>
            <li>规格与包装</li>
            <li>售后保障</li>
            <li>商品评价</li>
        </ul>
        <div class="box">
            <p class="box-item" style="display: block;">商品介绍内容</p>
            <p class="box-item">规格与包装内容</p>
            <p class="box-item">售后保障内容</p>
            <p class="box-item">商品评价内容</p>
        </div>
    </div>
    <script>
        var lis = document.querySelectorAll('li');
        var item = document.querySelectorAll('.box-item');
        for(var i=0;i<lis.length;i++){
            lis[i].setAttribute('index',i)
            lis[i].onclick = function (){
                for(var i=0;i<lis.length;i++){
                    lis[i].className = '';
                }
                this.className = 'item';
                var index = this.getAttribute('index');
                for(var i=0;i<lis.length;i++){
                    item[i].style.display = 'none';
                }
                item[index].style.display = 'block';
            }

        }
       
    </script>
</body>

</html>

前端张子豪

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
jsTab栏制作选项卡

案例分析1、Tab栏切换有2个大的模块2、上的模块选项卡，点某一个，当前这一个底色会变，其他不变（排他思想）修改类名的方法，3、下面的模块内容，会跟随上面的选项卡变化。所以下面的模块写到点击事件里。4、规律：下面的模块显示内容和上面的选项卡一一对应，相匹配。5、核心思路：给上面的模块里面的所有元素添加自定义属性属性值从0开始。6、当我们点击上面模块的某一个li，让下面模块对应序号的内容显示，其他隐藏（排他）。<!DOCTYPE html><html lang="en"&.
复制链接

扫一扫