【JavaScript】前端必学的tab栏切换布局分析

YinJie…

已于 2022-04-06 19:39:38 修改

阅读量1.2k

点赞数 2

分类专栏： javascript 文章标签： html5 javascript 前端 css

于 2022-03-06 14:19:01 首次发布

本文链接：https://blog.csdn.net/qq_49900295/article/details/123302595

版权

javascript 专栏收录该内容

39 篇文章 8 订阅

订阅专栏

文章目录

综合案例：
- 案例分析：
- 示例代码：
自定义属性的操作：

综合案例：

在这里插入图片描述
本案例要完成的就是当鼠标点击上面相应的选项卡(tab),下面内容跟随变化：
比如此时我们在商品介绍页面，然后我们单击售后保障选项卡：

可以看到下面的内容也会发生变化

案例分析：

(1) tab栏切换有两个大的模块（布局html）
(2) 模块选项卡中，点击某一个，当前这一个底色会是红色，其余不变(排他思想
(3) 下面的模块内容，会跟随上面的选项卡变化。所以下面模块变化写到选项卡里面

最终效果：
默认状态：
在这里插入图片描述
单击售后保障选项卡：

单击商品评价选项卡：

示例代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            * {
                margin: 0%;
                padding: 0;
                box-sizing: border-box;
            }
            .big {
                width: 600px;
                height: 500px;
                margin: 200px auto;
            }
            .box1 {
                width: 100%;
                height: 40px;
                background-color: rgb(231, 231, 231);
            }
            ul {
                list-style: none;
                display: flex;
            }
            .box1 li {
                display: block;
                text-align: center;
                line-height: 40px;
                width: 120px;
                height: 40px;
            }
            p {
                display: none;
            }
            p:first-child {
                display: block;
            }
            li:first-child {
                background-color: red;
            }
           
        </style>
    </head>
    <body>
        <div class="big">
            <div class="box1">
                <ul>
                    <li >商品介绍</li>
                    <li >规格与包装</li>
                    <li >售后保障</li>
                    <li >商品评价</li>
                    <li >手机社区</li>
                </ul>
            </div>
            <div class="box2">
                <p class="item">商品介绍模块内容</p>
                <p class="item">规格与包装模块内容</p>
                <p class="item">售后保障模块内容</p>
                <p class="item">商品评价模块内容</p>
                <p class="item">手机社区模块内容</p>
            </div>
        </div>
    </body>   
    <script>
        var box1 = document.querySelector('.box1');
        var lis = box1.querySelectorAll('li');
        var items = document.querySelectorAll('.item');
        for(var i = 0;i<lis.length;i++)
        {
            
            lis[i].setAttribute('index',i);//给所有li添加属性index
            //点击某一个，当前这一个底色会是红色，其余不变
            lis[i].onclick = function() {
                for(var j = 0;j<lis.length;j++)
                {
                    lis[j].style.backgroundColor = 'rgb(231, 231, 231)';//第一次循环将所有栏变成原来的颜色
                }
                this.style.backgroundColor = 'red';
                var index = this.getAttribute('index');//获取当前点击的是第几个栏
                for(var i = 0;i<items.length;i++)
                {
                    items[i].style.display = 'none';//先将所有内容样式都设置为不显示
                }
                items[index].style.display = 'block';//将当前栏对应样式设置显示
           }
        }
    </script>
</html>

下面学习一下本例用到的相关知识点

自定义属性的操作：

1.获取属性值：

（1） element.属性    //用于获取内置属性值
（2） element.getAttribute('属性')    //主要获得自定义的属性（指程序员自己定义的属性）

代码示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>

    </head>
    <body>
        <div id="demo"></div>
    </body>
    <script>
        var div = document.querySelector('#demo');
        console.log(div.id);  //demo
        console.log(div.getAttribute('id'));  //demo
    </script>
</html>

但是在上例中我们获取的是元素属性值，并不是自定义属性值。虽然element.Attribute(‘属性’) 同样可以获取内置属性值，但是我们还是建议用element.属性这样简单的方法。

如果div里添加了一个 index 属性，这是我们自定义的属性：

 <div id="demo" index = "1"></div>
 console.log(div.getAttribute('index'));   //1

这就是通过getAttribute来获取自定义属性。

2.设置属性值

（1） element.属性 = '值'    //用于设置内置属性值
（2） element.setAttribute('属性')    //主要设置自定义的属性（指程序员自己定义的属性）

示例代码：

<body>
        <div id="demo"></div>
</body>
<script>
        var div = document.querySelector('#demo');
        div.id = 'test';   //主要针对内置属性
        console.log(div.id);  //test
        div.setAttribute('id','first');  //主要设置自定义属性值
        console.log(div.id);  //first
</script>

3.移除属性值

（1） element.removeAttribute('属性") //移除属性

YinJie…

关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
打赏
1
评论
【JavaScript】前端必学的tab栏切换布局分析

文章目录综合案例：案例分析：示例代码：自定义属性的操作：1.获取属性值：2.设置属性值3.移除属性值综合案例：本案例要完成的就是当鼠标点击上面相应的选项卡(tab),下面内容跟随变化：比如此时我们在商品介绍页面，然后我们单击售后保障选项卡：可以看到下面的内容也会发生变化案例分析：(1) tab栏切换有两个大的模块（布局html）(2) 模块选项卡中，点击某一个，当前这一个底色会是红色，其余不变(排他思想(3) 下面的模块内容，会跟随上面的选项卡变化。所以下面模块变化写到选项卡里面最终效
复制链接

扫一扫