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

我就是我 2023-07-03 04:52 115阅读 0赞

在很多网页都有这一模块的开发,所以今天我也来做一下,这个模块很重要.  
几乎在每个网站都可以看得到  
成果图展示![在这里插入图片描述][20200202152236944.gif]  
当点击其他模块,下面的内容也会跟着改变  
后续的内容自己可以添加

<style>
       *{ 
            margin: 0;
            padding: 0;
        }
        .tab{ 
            border: 1px solid gray;
            height: 300px;
            width: 755px;
            margin: 100px auto;
        }
        .box-1{ 
            border-bottom:1px solid gray;
            height: 50px;
            background-color: whitesmoke;
            text-align: center;
        }
        li{  
            list-style-type: none;
            line-height: 50px;
            float: left;
            display: block;
            width: 150px;
            border-right: 1px solid gray;
       }
       .li-frist{ 
           background-color: goldenrod;
       }
       .bg{ 
           background-color: goldenrod;
       }
        .item{ 
            display: none;
        }
    </style>
    ------------html-------------
        <div class= "tab">
            <div class="box-1">
                <ul>
                    <li class="li-frist">产品参数</li>
                    <li>产品规格</li>
                    <li>功能模块</li>
                    <li>售后处理</li>
                    <li>好评率</li>
                </ul>
            </div>
            <div class= "box-2">
                
                <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>

js模块

<script>
            var lis = document.querySelectorAll("li");
            var items = document.getElementsByClassName("item");
            //1.点击某一个模块,当前底色变成红色,其余不变(利用排他思想)
            for(var i =0; i<lis.length; i++){ 
    
            // 给li设置一个自定义属性
                lis[i].setAttribute("index",i);
                lis[i].onclick = function(){ 
                    for(var i = 0; i<lis.length; i++){ 
                        lis[i].className = "";
                    }
                    this.className = "bg";
            //2显示, 点击某一个模块,内容跟着变
                    var index =this.getAttribute("index");
                        // 让其余的隐藏
                    for(var i = 0; i<items.length;i++){ 
                        items[i].style.display = "none";
                    }
                    //显示自己
                    items[index].style.display = "block";
                }
    
            }
            
        </script>

这里利用了两次排他思想,可见这个模块在实际开发过程中的重要性.  
希望大家喜欢.

[20200202152236944.gif]: https://img-blog.csdnimg.cn/20200202152236944.gif

发表评论取消回复

表情：

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

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

相关阅读

相关 JS导航栏功能实现

慕课网JS课程结课例子效果： ![2019082122043998.gif][] <!DOCTYPE HTML> <html>

向右看齐/ 2024年04月11日 13:22/ 0 赞/ 92 阅读

相关 tab栏切换

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

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

相关 tab栏切换练习

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

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

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

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

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

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

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

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

相关 Axure实现Tab选项卡切换功能

这几天用Axure画原型图的过程中，需要实现Tab选项卡切换的效果，但Axure中并没有类似于Tab控件的部件，所以可以用Axure中的动态面板(Dyn

àì夳堔傛蜴生んèń/ 2022年08月13日 19:45/ 0 赞/ 264 阅读

相关关于用原生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 赞/ 303 阅读

相关 jquery+css实现Tab栏切换的代码实例

前几天面试碰到现场给写一个Tab栏切换的功能，思想基本上懂，但是好久没写过，一时要全部实现效果还真有点难。回来后，再把思路理一理，写一个，基础还是很重要的。最终要实现的效果

谁践踏了优雅/ 2022年01月29日 00:31/ 0 赞/ 256 阅读

相关 JS实现的简单tab切换功能完整示例

本文实例讲述了JS实现的简单tab切换功能。分享给大家供大家参考，具体如下： <!DOCTYPE html> <html lang="en"> <he

怼烎@/ 2021年11月02日 17:12/ 0 赞/ 271 阅读