Web API 排他操作案例 —— tab栏切换

最新推荐文章于 2022-04-28 22:19:16 发布

没人回复我哼

最新推荐文章于 2022-04-28 22:19:16 发布

阅读量337

点赞数

文章标签： js javascript

本文链接：https://blog.csdn.net/qq_45645902/article/details/105600678

版权

这篇博客介绍如何使用JavaScript实现Tab切换功能，通过排他思想改变选项卡的样式和内容显示。当点击Tab栏的某个选项时，该选项底色变为红色，字体为白色，同时下方内容区相应模块显示，其他隐藏。实现方法包括为每个li元素添加自定义属性以标识序号，并在点击事件中根据序号控制内容的显示和隐藏。

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

学习来源：https://www.bilibili.com/video/BV1HJ41147DG

要求
鼠标点击上面相应的选项卡，下面的内容随之变化
在这里插入图片描述

思路
1、Tab栏有2个大的模块
2、上面的模块选项卡，点击某一个，当前这一个底色会是红色、字体白色，其余不变(排他思想)修改类名的方式
3、下面的模块内容会跟随上面的选项卡变化、一一对应，所以下面模块变化写到点击事件里面。
4、给上面的tab_list 里面的所有 li 添加自定义属性，属性值从0开始编号。
5、当我们点击tab_ list 里面的某个 li ，让tab_con 里面对应序号的内容显示，其余隐藏(排他.思想)

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

<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;
            /* 盒子大小为 width，padding和border不会撑大盒子 */
            box-sizing: border-box;
        }

        body {
   
            /* css3抗锯齿形，让文字显示的更加清晰 */
            -webkit-font-smoothing: antialiased;
            background-color: #fff;
            /* \5B8B\4F53  宋体 避免浏览器解析CSS代码时候出现乱码的问题 */
            font: 14px/1 Helvetica Neue, Helvetica, Arial, Microsoft Yahei, Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei, sans-serif;
            color: #333;
        }

        .tab {
   
            width: 1226px;
            margin