js实现tab栏切换

拼搏现实的明天。 2023-07-11 06:24 8阅读 0赞

![在这里插入图片描述][20200304175315638.PNG]  
html+css

<style> .tab2 { 
                width: 500px;
            }
    
            .tab2-list { 
                width: 500px;
            }
    
            .tab2-list>ul { 
                display: flex;
                width: 500px;
                margin: 0;
                padding: 0;
                align-items: center;
                justify-content: center;
            }
    
            .tab2-list>ul .item-tab2 { 
                display: flex;
                align-items: center;
                justify-content: center;
                list-style-type: none;
                margin: 0;
                padding: 0;
                width: 100px;
                height: 50px;
    
            }
    
            .current-tab2 { 
             
                background-color: #E4393C;
            }
    </style>
    <body>
        <div class="tab2">
            <div class="tab2-list">
                <ul>
                    <li class="item-tab2">商品介绍</li>
                    <li class="item-tab2">规格与包装</li>
                    <li class="item-tab2">售后保障</li>
                    <li class="item-tab2">商品评价</li>
                    <li class="item-tab2">手机社区</li>
                </ul>
            </div>
            <div class="tab2-content">
                <div class="item-content">商品介绍模块内容</div>
                <div class="item-content">规格与包装模块内容</div>
                <div class="item-content">售后保障模块内容</div>
                <div class="item-content">商品评价模块内容</div>
                <div class="item-content">手机社区模块内容</div>
            </div>
        </div>
    </body>

js部分

var currentTabIndex = 0
    
            document.querySelectorAll('.item-tab2').forEach(function (tab, index) { 
                tab.index = index
                if (currentTabIndex == tab.index) { 
                    tab.className += ' current-tab2'
                }
                console.log(tab.index)
                tab.onclick = function () { 
    
                    document.querySelectorAll('.item-tab2').forEach(function (tab1, index1) { 
                        tab1.className = 'item-tab2'
    
                    })
                    console.log(currentTabIndex)
                    currentTabIndex = tab.index
    
    
                    tab.className += ' current-tab2'
                    document.querySelectorAll('.item-content').forEach(function (content, index) { 
                        content.style.display = 'none'
                        content.index = index
                        console.log(content.index)
                        if (currentTabIndex == content.index) { 
                            content.style.display = ''
                        }
    
                    })
    
    
                }
            })
    
            document.querySelectorAll('.item-content').forEach(function (content, index) { 
                content.style.display = 'none'
                content.index = index
                console.log(content.index)
                if (currentTabIndex == content.index) { 
                    content.style.display = ''
                }
    
            })

[20200304175315638.PNG]: https://img-blog.csdnimg.cn/20200304175315638.PNG

发表评论取消回复

表情：

评论列表（有 0 条评论，8人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue.js实现tab切换效果

ab切换第一步先要把HTML写好，这个第一步很关键，主要分为两块结构 <div id="app"> <ul class="tab-tilt...

古城微笑少年丶/ 2024年04月17日 13:51/ 0 赞/ 55 阅读

相关 js实现tab栏切换

![在这里插入图片描述][20200304175315638.PNG] html+css <style> .tab2 { wid

拼搏现实的明天。/ 2023年07月11日 06:24/ 0 赞/ 9 阅读

相关 tab栏的简单切换

tab栏的简单切换样式不是很好看，主要的是思路和逻辑上代码： <!DOCTYPE html> <html lang="en"> <

绝地灬酷狼/ 2023年07月08日 09:22/ 0 赞/ 23 阅读

相关利用js实现Tab栏的切换功能

在很多网页都有这一模块的开发,所以今天我也来做一下,这个模块很重要. 几乎在每个网站都可以看得到成果图展示![在这里插入图片描述][20200202152236944

我就是我/ 2023年07月03日 04:52/ 0 赞/ 117 阅读

相关 tab栏切换

tab栏切换 1、jquery方式首先引入 jquery.js 文件 <style type="text/css"> {

分手后的思念是犯贱/ 2022年12月28日 11:08/ 0 赞/ 189 阅读

相关 tab栏切换练习

![在这里插入图片描述][20200806104510340.gif] <!DOCTYPE html> <html lang="en"> <head> <meta c

绝地灬酷狼/ 2022年11月24日 12:56/ 0 赞/ 163 阅读

相关 Vue.js实现tab切换效果

利用Vue实现简易tab切换效果 1.1 在我们平时浏览网站的时候，经常看到的特效有图片轮播、导航子菜单的隐藏、tab标签的切换等等。这段时间学习了vue后，开始要写出一

骑猪看日落/ 2022年10月02日 10:51/ 0 赞/ 257 阅读

相关纯CSS实现Tab切换以及 CSS+JS实现Tab切换

纯CSS实现Tab切换效果图思路代码 CSSJS实现Tab切换效果图

怼烎@/ 2022年09月24日 11:20/ 0 赞/ 272 阅读

相关关于用原生js实现tab栏的切换：

今天并不是很忙，然后就复习了原生的js。如何用原生js实现tab栏的切换呢？请看下图：当鼠标在女装男装时，显示女装男装。 ![这里写图片描述当鼠标在女装男装时，显

清疚/ 2022年07月13日 02:41/ 0 赞/ 228 阅读

相关 jQuery实战_tab栏切换

jQuery实现tab栏切换 HTML结构： <ul> <li class="active">第一栏</li> <li>第二

朱雀/ 2022年05月22日 12:40/ 0 赞/ 304 阅读