jQuery书写Tab栏切换

jQuery 是一个快速、简洁的 JavaScript 框架，是继 Prototype 之后又一个优秀的 JavaScript 代码库（ 或 JavaScript 框架 ）。 jQuery 设计的宗旨是 “write Less，Do More”，即倡导写更少的代码，做更多的事情。

jQuery = javascript Query（查询）。意思是查询 js，把 js 中的 DOM 操作做了封装，我们可以快速的查询使用里面的功能。

它封装 JavaScript 常用的功能代码，提供一种简便的 JavaScript 设计模式，优化 HTML 文档操作、事件处理、动画设计和 Ajax 交互。

css

<script src="./jquery/jquery-3.6.3.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .menu{
            width: 500px;
            display: flex;
            margin: auto;
        }
        .menu li{
            width: 100px;
            height: 15px;
            line-height: 15px;
            padding: 15px 15px;
            text-align: center;
            border: 1px solid #000;
        }
        .menu li.active{
            background-color: aqua;
        }
        .show li{
            width: 500px;
            height: 300px;
            display: none;
            margin: auto;
            border: 1px solid #000;
            box-sizing: border-box;
        }
        .show li.active{
            display: block;
        }
        li,a{
            list-style: none;
            text-decoration: none;
        }
       
    </style>

html

<div class="container">
        <ul class="menu">
            <li class="active"><a>首页</a></li>
            <li><a>关于我们</a></li>
            <li><a>产品介绍</a></li>
            <li><a>产品介绍</a></li>
            <li><a>联系我们</a></li>
        </ul>
        <ul class="show">
            <li class="active">我是第1个模块</li>
            <li>我是第2个模块</li>
            <li>我是第3个模块</li>
            <li>我是第4个模块</li>
            <li>我是第5个模块</li>
        </ul>
    </div>

script

<script>
        // jquery写法


        $(function(){
            $('.menu li').click(function(){
                $(this).addClass('active').siblings().removeClass('active');
                $('.show li').eq($(this).index()).addClass('active').siblings().removeClass('active');
            });
        });

        // 原生写法
        window.addEventListener('load',function(){
            var lis1 = document.querySelectorAll('.menu li');
            var lis2 = document.querySelectorAll('.show li');
            for( var i = 0;i<lis1.length;i++){
                lis1[i].setAttribute('data-index',i);
                lis1[i].addEventListener('click',function(){
                    for(var j=0;j<lis1.length;j++){
                        lis1[j].classList.remove('active');
                        lis2[j].classList.remove('active');
                    }
                    this.classList.add('active');
                    lis2[this.getAttribute('data-index')].classList.add('active');
                })
            }
        });
    </script>