jquery纵向切换

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。纵向切换通常指的是在一个页面内通过滚动或切换的方式展示不同的内容区域。

类型

滚动切换：通过监听滚动事件，根据滚动位置切换不同的内容区域。
按钮切换：通过点击按钮来切换不同的内容区域。
触摸切换：在移动设备上，通过触摸滑动来切换内容区域。

应用场景

单页应用（SPA）：在单页应用中，纵向切换可以用来展示不同的页面内容，而不需要重新加载整个页面。
内容展示：在新闻网站、博客等场景中，可以通过纵向切换来展示不同的文章或内容。
电商网站：在电商网站中，可以通过纵向切换来展示不同的商品分类或详情。

示例代码

以下是一个简单的 jQuery 纵向滚动切换的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery 纵向切换</title>
    <style>
        .section {
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 2em;
        }
        #section1 { background-color: #f06; }
        #section2 { background-color: #0f6; }
        #section3 { background-color: #06f; }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div id="section1" class="section">Section 1</div>
    <div id="section2" class="section">Section 2</div>
    <div id="section3" class="section">Section 3</div>

    <script>
        $(document).ready(function() {
            $(window).scroll(function() {
                var scrollTop = $(this).scrollTop();
                if (scrollTop >= 0 && scrollTop < $(window).height()) {
                    $('body').css('background-color', '#f06');
                } else if (scrollTop >= $(window).height() && scrollTop < $(window).height() * 2) {
                    $('body').css('background-color', '#0f6');
                } else if (scrollTop >= $(window).height() * 2) {
                    $('body').css('background-color', '#06f');
                }
            });
        });
    </script>
</body>
</html>