JQ---制作表单切换选项

// 样式：

    * {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .container {
        width: 500px;
        border: 1px solid red;
        margin: 100px;
    }

    .title {
        display: flex;
        align-items: center;
    }


    .title li {
        padding: 10px 0px;
        flex: 1;
        text-align: center;
        border-radius: 5px;
        cursor: pointer;
        user-select: none;
    }

    .title li.active {
        background: red;
        color: #fff;
    }

    .content li {
        display: none;
    }

div class="container">

    <ul class="title">
        <li class="active">蛋糕</li>
        <li>冰淇淋</li>
        <li>巧克力</li>
    </ul>
    <ul class="content">
        <li style="display: block;">蛋糕蛋糕蛋糕蛋糕蛋糕蛋糕蛋糕蛋糕蛋糕蛋糕蛋糕蛋糕蛋糕蛋糕蛋糕蛋糕蛋糕</li>
        <li>冰淇淋冰淇淋冰淇淋冰淇淋冰淇淋冰淇淋冰淇淋冰淇淋冰淇淋冰淇淋冰淇淋冰淇淋</li>
        <li>巧克力巧克力巧克力巧克力巧克力巧克力巧克力巧克力巧克力巧克力巧克力巧克力巧克力</li>
    </ul>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

</body>

// JQ:

<script>
 $(function () {

        $('.container li').click(function () {
            $(this).addClass('active').siblings('.active').removeClass('active')
            $('.content li').eq($(this).index()).show().siblings().hide()
        })
        
 })
 </script>