jQuery实现电梯导航案例详解(切换网页区域)

当我们需要实现一个长页面的导航时，使用电梯导航是一种常见且非常实用的方法。本篇文章将详细讲解如何使用jQuery实现电梯导航的切换效果。

实现思路

我们需要做的是，当点击电梯导航中的某一个链接时，能够让页面滚动到对应区域，并在导航中添加相应的样式。我们可以通过以下步骤来实现电梯导航：

将页面中的每一个内容区域添加一个属性id，并将该属性与电梯导航中的相应链接的href属性值相对应。
监听电梯导航的链接的点击事件，并阻止默认行为。
获取当前点击链接的href属性值，并根据该值找到对应的内容区域。
使用jQuery的animate方法，实现页面滚动到对应区域的效果。
在电梯导航中添加对应链接的样式。

具体实现

下面，我们通过两个实例来说明如何实现电梯导航。

实例一

首先，创建一个html文件，添加以下代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>电梯导航</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <nav>
        <ul>
            <li><a href="#section1">Section 1</a></li>
            <li><a href="#section2">Section 2</a></li>
            <li><a href="#section3">Section 3</a></li>
            <li><a href="#section4">Section 4</a></li>
            <li><a href="#section5">Section 5</a></li>
        </ul>
    </nav>

    <section id="section1">
        <h2>Section 1</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ultricies aliquet ipsum, sit amet vulputate lacus dapibus vel. Duis bibendum ligula eu enim euismod, sit amet fringilla diam sodales. </p>
    </section>

    <section id="section2">
        <h2>Section 2</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ultricies aliquet ipsum, sit amet vulputate lacus dapibus vel. Duis bibendum ligula eu enim euismod, sit amet fringilla diam sodales. </p>
    </section>

    <section id="section3">
        <h2>Section 3</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ultricies aliquet ipsum, sit amet vulputate lacus dapibus vel. Duis bibendum ligula eu enim euismod, sit amet fringilla diam sodales. </p>
    </section>

    <section id="section4">
        <h2>Section 4</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ultricies aliquet ipsum, sit amet vulputate lacus dapibus vel. Duis bibendum ligula eu enim euismod, sit amet fringilla diam sodales. </p>
    </section>

    <section id="section5">
        <h2>Section 5</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ultricies aliquet ipsum, sit amet vulputate lacus dapibus vel. Duis bibendum ligula eu enim euismod, sit amet fringilla diam sodales. </p>
    </section>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="main.js"></script>
</body>
</html>

该页面中包括了一个带有五个链接的电梯导航，以及五个内容区域。我们需要通过jQuery来实现电梯导航的切换效果。下面来看一下main.js中的代码：

$(function(){
    // 监听电梯导航中的链接的点击事件，并阻止默认行为
    $('nav ul li a').click(function(e){
        e.preventDefault();
        // 获取当前点击链接的href属性值，并根据该值找到对应的内容区域
        var target = $(this.hash);
        // 判断是否找到了对应区域，如果有就执行滚动效果，否则什么也不做
        if(target.length){
            // 使用jQuery的animate方法，实现页面滚动到对应区域的效果
            $('html, body').animate({
                scrollTop: target.offset().top
            }, 1000);
            // 在电梯导航中添加对应链接的样式
            $('nav ul li a').removeClass('active');
            $(this).addClass('active');
        }
    });
});

这段代码中，首先监听了电梯导航中的链接的点击事件，并阻止了默认行为。接着通过获取当前点击链接的href属性值，找到对应的内容区域。然后使用jQuery的animate方法，实现页面滚动到对应区域的效果，并在电梯导航中添加对应链接的样式。

实例二

接下来，我们再来看一种稍微不同的实现方式。同样是一个html文件，添加以下代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>电梯导航</title>
    <style type="text/css">
        body{
            margin:0;
            padding:0;
            font-family: Arial, sans-serif;
        }

        .nav{
            position:fixed;
            top:0;
            left:0;
            width:100%;
            background-color:#EEE;
            padding:20px 0;
        }

        .nav a{
            padding:10px 20px;
            color:#333;
            text-decoration:none;
            font-size:20px;
        }

        .nav a.active{
            background-color:#333;
            color:#FFF;
        }

        .section{
            padding:100px;
            background-color:#FFF;
            color:#333;
            text-align:center;
            height:100vh;
        }

        .section h1{
            margin-top:0;
        }
    </style>
</head>
<body>
    <div class="nav">
        <a href="#section1">Section 1</a>
        <a href="#section2">Section 2</a>
        <a href="#section3">Section 3</a>
        <a href="#section4">Section 4</a>
        <a href="#section5">Section 5</a>
    </div>

    <div class="section" id="section1">
        <h1>Section 1</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ultricies aliquet ipsum, sit amet vulputate lacus dapibus vel. Duis bibendum ligula eu enim euismod, sit amet fringilla diam sodales. </p>
    </div>

    <div class="section" id="section2">
        <h1>Section 2</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ultricies aliquet ipsum, sit amet vulputate lacus dapibus vel. Duis bibendum ligula eu enim euismod, sit amet fringilla diam sodales. </p>
    </div>

    <div class="section" id="section3">
        <h1>Section 3</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ultricies aliquet ipsum, sit amet vulputate lacus dapibus vel. Duis bibendum ligula eu enim euismod, sit amet fringilla diam sodales. </p>
    </div>

    <div class="section" id="section4">
        <h1>Section 4</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ultricies aliquet ipsum, sit amet vulputate lacus dapibus vel. Duis bibendum ligula eu enim euismod, sit amet fringilla diam sodales. </p>
    </div>

    <div class="section" id="section5">
        <h1>Section 5</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ultricies aliquet ipsum, sit amet vulputate lacus dapibus vel. Duis bibendum ligula eu enim euismod, sit amet fringilla diam sodales. </p>
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="main.js"></script>
</body>
</html>

我们仍然需要通过jQuery来实现电梯导航的切换效果。下面来看一下main.js中的代码：

$(function(){
    // 获取所有section
    var $sections = $('.section');
    // 获取导航的高度
    var navHeight = $('.nav').outerHeight();
    // 监听窗口滚动事件，并实时更新当前所在的区域
    $(window).scroll(function(){
        // 获取窗口滚动的距离
        var scrollTop = $(this).scrollTop() + navHeight;
        // 根据滚动距离判断当前所在的区域，并在电梯导航中添加对应链接的样式
        $sections.each(function(){
            var top = $(this).offset().top;
            var bottom = top + $(this).outerHeight();
            if(scrollTop >= top && scrollTop <= bottom){
                $('.nav a').removeClass('active');
                $('.nav a[href="#'+$(this).attr('id')+'"]').addClass('active');
            }
        });
    });

    // 监听电梯导航中的链接的点击事件，并实现滚动效果
    $('.nav a').click(function(e){
        e.preventDefault();
        var target = $(this.hash);
        if(target.length){
            $('html, body').animate({
                scrollTop: target.offset().top - navHeight
            }, 1000);
            $('.nav a').removeClass('active');
            $(this).addClass('active');
        }
    });
});

这段代码实现了一个稍微复杂的功能，除了实现上述的滚动效果之外，还可以根据当前滚动位置自动更新电梯导航中的链接的样式。具体方法是：监听窗口滚动事件，并实时更新当前所在的区域。根据滚动距离判断当前所在的区域，并在电梯导航中添加对应链接的样式。最后，在点击电梯导航的链接时，也要实现滚动效果。在这种情况下，我们还需要获取导航栏的高度，以防止点击链接时导航栏挡住了所点击的内容区域。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery实现电梯导航案例详解(切换网页区域) - Python技术站

jQuery实现电梯导航案例详解(切换 网页区域)

实现思路

具体实现

实例一

实例二

相关文章

jQuery实现电梯导航案例详解(切换网页区域)