左侧导航右侧内容对应位置高亮

    <script>

 

        // JavaScript代码

        function highlightNavItem() {

            var navItems = $(".active"); // 左侧导航项

            var contentSections = $(".content-section"); // 右侧内容区域的相关内容部分

            //导航点击

            navItems.click(function (e) {

                e.preventDefault(); // 阻止默认的点击行为

                var index = $(this).index(); // 获取被点击导航项的索引

                var targetSection = contentSections.eq(index); // 获取对应索引的内容部分

                var targetOffset = targetSection.offset().top - 300; // 目标内容部分距离顶部的偏移位置

                $("html, body").animate(

                    { scrollTop: targetOffset },

                    500 // 动画滚动持续时间，单位为毫秒

                );

            });

            $(window).scroll(function () { // 监听滚动事件

                var currentPosition = $(window).scrollTop(); // 获取当前滚动位置

                contentSections.each(function () {

                    var sectionOffset = $(this).offset().top - $(window).height() / 2; // 计算相关内容部分距离顶部的偏移位置

                    if (currentPosition >= sectionOffset) { // 如果当前滚动位置超过了相关内容部分的偏移位置

                        var index = contentSections.index(this); // 获取该相关内容部分在contentSections数组中的索引

                        navItems.removeClass("active"); // 移除所有导航项的活动类名

                        navItems.eq(index).addClass("active"); // 给对应索引的导航项添加活动类名

                    }

                });

            });

        }

        highlightNavItem();

    </script>