用jQuery方法写tab栏的方法，点击方式

css代码：

        * {
            margin: 0;
            padding: 0;
        }
        
        .active {
            color: #fff;
            background-color: red;
        }
        
        .box {
            width: 600px;
            height: 400px;
        }
        
        li {
            flex: 1;
            list-style: none;
            text-align: center;
            line-height: 50px;
        }
        
        ul {
            width: 600px;
            height: 50px;
            margin: 0 auto;
            display: flex;
            background-color: #eee;
        }
        
        ol li {
            display: none;
        }
        
        .show {
            display: block;
        }

html代码块：

    <div class="box">
        <ul>
            <li class="active">商品介绍1</li>
            <li>商品介绍2</li>
            <li>商品介绍3</li>
            <li>商品介绍4</li>
            <li>商品介绍5</li>
        </ul>
        <ol>
            <li class="show">商品介绍</li>
            <li>规格与包装</li>
            <li>售后保障</li>
            <li>商品评价</li>
            <li>合作联系</li>
        </ol>
    </div>

引入jquery.js

<script src="./js/jquery-3.6.1.js"></script>

jQuery片段代码：

        $(function() {
            $('ul li').click(function() {
                var index = $(this).index()
                $(this).addClass('active').siblings('li').removeClass('active')
                $('ol li').eq(index).addClass('show').siblings('li').removeClass('show')
            })
        })