<div class="mc_aside_navbox mc_aside_navbox1 show">
<ul class="mc_aside_nav">
<li class="mc_aside_li on">
111
</li>
<li class="mc_aside_li on">
222
</li>
<li class="mc_aside_li on">
333
</li>
<li class="mc_aside_li">
444
</li>
</ul>
</div>
<div class="content-section">111</div>
<div class="content-section">222</div>
<div class="content-section">333</div>
<div class="content-section">444</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<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>