前端实现tab栏切换,这么常见的案例你学会了吗?

简介: tab栏切换制作是我们web开发中一个十分常见的案例,今天在这里写写,希望对大家有所帮助,还是要用到我们上节写到的排他思想!好好学哦!

1.循环为每个小li注册事件,在注册事件之前同时为点击的小li添加自定义属性index用来保存索引号。

2.用排他思想,点击小li后首先循环通过改变className去掉所有按钮背景色(干掉其他人),然后为点击的按钮添加class增加背景色(留下我自己)。

3.循环将下面显示区的display属性设置为none,然后获取你当前点击的li的index属性值,这个索引和下面的div是对应的,最终将这个index对应的div的display属性设置为block就可以了。还是排他思想。

image.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        li{
            list-style: none;
        }
        .tab{
            width: 38%;
            height: 400px;
            margin: 100px auto;
        }
        .tab_list{
            width: 100%;
            height: 36px;
            background-color: #f7f7f7;
            border: 1px solid #eee;
            border-bottom: 1px solid #e4393c;
        }
        .current {
            background-color: #e4393c;
            color: #fff;
        }
        .tab_list li{
            font: 14px Microsoft YaHei;
            display: inline-block;
            padding:9px 25px;
        }
        .tab_list li:hover{
            cursor: pointer;
        }
        .tab_con{
            width: 100%;
            height: 360px;
            border: 1px solid #eee;
            border-top: none;
        }
        .tab_con .item{
            height: 100%;
            display: none;
            font-size: 13px;
            text-indent: 13px;
        }
    </style>
</head>
<body>
    <div class="tab">
        <div class="tab_list">
            <ul>
                <li class="current">商品介绍</li>
                <li>规格与包装</li>
                <li>售后保障</li>
                <li>商品评价</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 lis = document.querySelector('.tab_list').querySelectorAll('li');
        var divs = document.querySelector('.tab_con').querySelectorAll('div');
        for (var i=0;i<lis.length;i++){
            lis[i].setAttribute('index',i); //给5个小li设置索引号
            lis[i].onclick = function(){
                // 1.上面的模块选项卡,点击一个,他的底色变成红色
                // 排他思想  
                // 消除所有人
                for (var j=0;j<lis.length;j++){
                    lis[j].className = '';
                }
                // 保留我自己
                this.className = 'current';  //this 指向事件函数的调用者
                // 2.下面的显示内容模块
                for (var k=0;k<divs.length;k++){
                     // 消除所有人
                    divs[k].style.display = 'none';
                }
                var index = this.getAttribute('index');
                 // 保留我自己
                divs[index].style.display = 'block';
            }
        }
    </script> 
</body>
</html>

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
       $(function(){
         $(".tab_list li").click(function(){
            $(".tab_list li").removeClass("current");  //干掉所有人
             $(this).addClass("current");   //留下我自己
            var index = $(this).index();
            $(".tab_con .item").hide();   //干掉所有人
            $(".tab_con .item").eq(index).show();  //留下我自己
            });
     });

image.png


相关文章
|
6月前
|
JavaScript 前端开发 Java
纯前端JS实现人脸识别眨眨眼张张嘴案例
纯前端JS实现人脸识别眨眨眼张张嘴案例
|
3月前
|
搜索推荐 前端开发 数据可视化
【优秀python web毕设案例】基于协同过滤算法的酒店推荐系统,django框架+bootstrap前端+echarts可视化,有后台有爬虫
本文介绍了一个基于Django框架、协同过滤算法、ECharts数据可视化以及Bootstrap前端技术的酒店推荐系统,该系统通过用户行为分析和推荐算法优化,提供个性化的酒店推荐和直观的数据展示,以提升用户体验。
152 1
|
2月前
|
前端开发 JavaScript
前端一键回到顶部案例
本文介绍了如何实现网页中的一键回到顶部功能,包括两种方法:第一种是通过HTML中的锚点跳转实现快速回到顶部;第二种是使用JavaScript的`scrollTo`方法结合`requestAnimationFrame`实现滚动动画效果,让页面滚动更加平滑自然。
48 1
前端一键回到顶部案例
|
1月前
|
存储 前端开发 Java
验证码案例 —— Kaptcha 插件介绍 后端生成验证码,前端展示并进行session验证(带完整前后端源码)
本文介绍了使用Kaptcha插件在SpringBoot项目中实现验证码的生成和验证,包括后端生成验证码、前端展示以及通过session进行验证码校验的完整前后端代码和配置过程。
91 0
验证码案例 —— Kaptcha 插件介绍 后端生成验证码,前端展示并进行session验证(带完整前后端源码)
|
2月前
|
前端开发 数据安全/隐私保护
【前端web入门第二天】03 表单-下拉菜单 文本域 label标签 按钮 【附注册信息综合案例】
本文档详细介绍了HTML表单的多种元素及其用法,包括下拉菜单(`&lt;select&gt;` 和 `&lt;option&gt;`)、文本域(`&lt;textarea&gt;`)、标签解释(`&lt;label&gt;`)、各类按钮(`&lt;button&gt;`)及表单重置功能、无语义布局标签(`&lt;div&gt;` 和 `&lt;span&gt;`)以及字符实体的应用。此外,还提供了一个完整的注册信息表单案例,涵盖个人信息、教育经历和工作经历等部分,展示了如何综合运用上述元素构建实用的表单。
【前端web入门第二天】03 表单-下拉菜单 文本域 label标签 按钮 【附注册信息综合案例】
|
2月前
|
JavaScript 前端开发
前端基础(十)_Dom自定义属性(带案例)
本文介绍了DOM自定义属性的概念和使用方法,并通过案例展示了如何使用自定义属性来控制多个列表项点击变色的独立状态。
43 0
前端基础(十)_Dom自定义属性(带案例)
|
2月前
|
JSON 前端开发 JavaScript
socket.io即时通信前端配合Node案例
本文介绍了如何使用socket.io库在Node.js环境下实现一个简单的即时通信前端配合案例,包括了服务端和客户端的代码实现,以及如何通过socket.io进行事件的发送和监听来实现实时通信。
38 2
|
2月前
|
前端开发
【前端web入门第五天】03 清除默认样式与外边距问题【附综合案例产品卡片与新闻列表】
本文档详细介绍了CSS中清除默认样式的方法,包括清除内外边距、列表项目符号等;探讨了外边距的合并与塌陷问题及其解决策略;讲解了行内元素垂直边距的处理技巧;并介绍了圆角与盒子阴影效果的实现方法。最后通过产品卡片和新闻列表两个综合案例,展示了所学知识的实际应用。
55 11
|
2月前
|
前端开发
前端web入门第四天】03 显示模式+综合案例热词与banner效果
本文档介绍了HTML中标签的三种显示模式:块级元素、行内元素与行内块元素,并详细解释了各自的特性和应用场景。块级元素独占一行,宽度默认为父级100%,可设置宽高;行内元素在同一行显示,尺寸由内容决定,设置宽高无效;行内块元素在同一行显示,尺寸由内容决定,可设置宽高。此外,还提供了两个综合案例,包括热词展示和banner效果实现,帮助读者更好地理解和应用这些显示模式。
|
2月前
|
JavaScript 前端开发
【前端web入门第一天】03 综合案例 个人简介与vue简介
该网页采用“从上到下,先整体再局部”的制作思路,逐步分析并编写代码实现个人简介页面。内容涵盖尤雨溪的背景、学习经历及主要成就,同时介绍其开发的Vue.js框架特点。代码结构清晰,注重细节处理,如使用快捷键提高效率,预留超链接位置等,确保最终效果符合预期。